如何使用 "setInterval()" 每秒更新一次时间而不是每秒闪烁一次？

Question

我正在使用一个下拉列表，该列表使用 moment-timezone 显示不同的时区。例如，当您单击标记为 "est" 的下拉列表时，它将显示东部时间，当您单击 "cst" 时，将显示美国东部时间，依此类推。

无论如何，我运行遇到的问题是这个...我使用 setInterval(updateTime, 1000); 来显示秒数，现在当用户单击 [=24] 时执行此操作=] 然后下拉列表中的另一个时区，如 "cst" 这两个时间都会每秒出现和消失。我想要它，所以当您单击 li 元素时，屏幕上显示的前一个元素将具有显示 =none 的属性。因此，当您单击 est 时，例如将显示 est 时间，然后当您单击 cst 时，est 将为 display=none 并且将显示 cst 时间。满嘴的男人。

有没有办法做到这一点并且仍然使用 1 秒的 setInterval？

这是我的代码...

<div>
    <li>
        <ul>
        <li id="tmz1">est</li>
        <li id="tmz2">central</li>
        <li>pacific</li>
        </ul>
   </li>

   <div id="output1"></div>
   <div id="output2"></div>
</div>    


$(document).ready(function(){

    var output1 = document.getElementById('output1');
    var output2 = document.getElementById('output2');

    document.getElementById('tmz1').onclick = function updateTime(){

        output2.style.display = "none";
        output1.style.display = "block";

        var now = moment();
        var humanReadable = now.tz("America/Los_Angeles").format('hh:mm:ssA');

        output1.textContent = humanReadable;
        setInterval(updateTime, 1000);

    }

    updateTime();

});


$(document).ready(function(){

    var output2 = document.getElementById('output2');
    var output1 = document.getElementById('output1');

    document.getElementById('tmz2').onclick = function updateTimeX(){

        output1.style.display = "none";
        output2.style.display = "block";

        var now = moment();
        var humanReadable = 
        now.tz("America/New_York").format('hh:mm:ssA');

        output2.textContent = humanReadable;
        setInterval(updateTimeX, 1000);

    }

    updateTimeX();

});

Answer 1

将您的 setInterval 分配给一个变量，并在用户选择新值表单下拉列表并使用新值重新启动间隔时清除它

var interval = setInterval(updateTime, 1000);
if(oldValue !== newValue){
  clearInterval(interval)
}

Answer 2

也许这会有所帮助。我相信你已经把这个复杂化了一点。我在代码中提供了注释供您查看。

注意：我没有使用 moment.js，因为它对您的任务来说是不必要的。

你需要：

日期对象中的时间
一个时区参考单击后更改
将发布时间的间隔（与不断变化的 TZ)
放置输出的地方

// place to put the output
const output = document.getElementById('output');
// starting timezone
var tz = 'America/New_York';
// Capture click event on the UL (not the li)
document.getElementsByTagName('UL')[0].addEventListener('click', changeTZ);

function changeTZ(e) {
  // e.target is the LI that was clicked upon
  tz = e.target.innerText;
  // toggle highlighted selection 
  this.querySelectorAll('li').forEach(el=>el.classList.remove('selected'));
  e.target.classList.add('selected');
}

// set the output to the time based upon the changing TZ
// Since this is an entire datetime, remove the date with split()[1] and trim it
setInterval(() => {
  output.textContent = new Date(Date.now()).toLocaleString('en-US', {timeZone: `${tz}`}).split(',')[1].trim();
}, 1000);

.selected {
  background-color: lightblue;
}

<div>
  <ul>
    <li class="selected">America/New_York</li>
    <li>America/Chicago</li>
    <li>America/Los_Angeles</li>
  </ul>

  <div id="output"></div>
</div>

如何使用 "setInterval()" 每秒更新一次时间而不是每秒闪烁一次？

How to update the time every second using "setInterval()" without the time flashing in and out every second?

javascript

momentjs

moment-timezone