时间戳

首页 > 解决方案 > 如何使用“setInterval()”每秒更新一次时间，而不是每秒闪烁一次？

javascript - 如何使用“setInterval()”每秒更新一次时间，而不是每秒闪烁一次？

问题描述

我正在使用一个下拉列表，使用时刻时区在点击时显示不同的时区。例如，当您单击标有“est”的下拉菜单时，它将显示东部时间，当您单击“cst”时，将显示 cst 时间，依此类推。

无论如何，我遇到的问题是......我setInterval(updateTime, 1000);用来显示秒数，现在通过当用户点击“est”然后在下拉列表中点击另一个时区，如“cst”时这样做那些时间的每一秒都会在彼此之上出现和消失。我想要它，所以当您单击一个li元素时，屏幕上的前一个元素将具有 display=none 的属性。因此，例如当您单击 est 时，将显示 est 时间，然后当您单击display=nonecst 时，将显示 est 并显示 cst 时间。满口的男人。

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

这是我的代码...

<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();

});

标签： javascriptmomentjsmoment-timezone

解决方案

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

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

推荐阅读