Как обновлять время каждую секунду, используя "setInterval ()", а время не мигает каждую секунду?

Question

Я использую выпадающий список, который отображает различные часовые пояса по щелчку, используя момент-часовой пояс.Например, когда вы щелкаете по раскрывающемуся списку с надписью «est», он отображает время по восточному времени, когда вы нажимаете «cst», отображается время cst и т. Д.

В любом случае проблема, с которой я сталкиваюсь, заключается вэто ... Я использую setInterval(updateTime, 1000);, чтобы показывать количество секунд каждую секунду, теперь, когда пользователь нажимает на "est", а затем в раскрывающемся списке, например, "cst", появляется другой часовой пояс, оба этих времениисчезают каждую секунду друг на друга.Я хочу, чтобы при щелчке на элементе li предыдущий экран отображал свойство display = none.Так, например, когда вы щелкнете по est, отобразится est time, а затем, когда вы нажмете cst, est будет display=none, и время cst отобразится.Человек с полным ртом.

Есть ли способ сделать это и все еще использовать setInterval 1 секунды?

Вот мой код ...

<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. Someplaceпоставить вывод

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