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

Question

我正在使用一个下拉列表，该列表使用moment-timezone 显示不同的时区onclick。例如，当您单击标有“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();});

Answer 1

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

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

你需要：

1. 来自 Date 对象的时间

2. 单击时将更改的时区参考

3. 将发布时间的间隔（随着 TZ 的变化）

4. 放置输出的地方

// 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>

Answer 2

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

var interval = setInterval(updateTime, 1000);

if(oldValue !== newValue){

  clearInterval(interval)

}