MomentJS сброс / повторное использование элемента DOM для отображения нового времени - PullRequest
Новая
       6

MomentJS сброс / повторное использование элемента DOM для отображения нового времени

0 голосов
/ 15 ноября 2018

Я боролся с этим в трех проектах сейчас и каждый раз полностью отказывался от этой концепции. Я хочу иметь единственный элемент DOM с именем general_current-time, который можно динамически изменять в соответствии с текущим временем активного местоположения.

В настоящее время происходит то, что первый запуск будет выполняться, как и ожидалось, но любые попытки его замены будут продолжать повторяться в течение первого запрошенного времени.

Я пытался очистить поле или заменить текст перед началом нового интервала.

Есть ли способ остановить интервал и создать новый?

Образец ниже (обновлено): 

    function getTime(timezone) {
        stopTime(currTime);
        switch (timezone) {
            case 'Eastern':
                var b = "America/New_York"
                break;
            case 'Central':
                var b = "America/Mexico_City"
                break;
            case 'Mountain':
                var b = "America/Denver"
                break;
            case 'Pacific':
                var b = "America/Los_Angeles"
                break;
            case 'Arizona':
                var b = "America/Phoenix"
                break;
        }
        var currTime = setInterval(function () {
            var a = new moment().tz(b).format('hh:mm:ss a');
            $('#general_current-time').text(a);
        }, 1000)
    }

    function stopTime(currTime) {
        $('#general_current-time').text('Resetting..');
        clearInterval(currTime);
    }

1 Ответ

0 голосов
/ 15 ноября 2018

Вы должны сохранить ссылку на setInterval, если хотите очистить ее. 

var timer = setInterval(...)

Я бы также предложил поместить логику этого в отдельную функцию для вызова при необходимости и кэшировать вашиJQuery селекторы.Это дополнительная работа, проверяющая часовой пояс на каждой итерации таймера (я сомневаюсь, что клиент часто меняет часовые пояса, если вообще когда-либо), и увеличение задержки, чтобы соответствовать точности вашего дисплея (в этом случае вы показываете точность до секунд, но вы вызываетеинтервал 10 раз в секунду, что означает, что 9 из 10 вызовов являются излишними) 

// cache timezone 
var zone = {
  'Eastern': 'America/New York',
  'Central': 'America/Mexico_City',
  'Mountain': 'America/Denver',
  'Pacific': 'America/Los_Angeles',
  'Arizona': 'America/Phoenix'
}[data.Timezone];

// cache DOM element to update
var $time = $('#general_current-time');

function updateTime() {
  $time.text(moment().tz(zone).format('hh:mm:ss a'));
}

// store a reference to the timer. Also, since the format precision is
// seconds, only run this every ~1000ms
var interval = setInterval(updateTime, 1000);

Обратите внимание, что updateTime нечисто, поскольку использует zone и $time из родительской области видимости., поэтому, безусловно, есть некоторые улучшения, которые можно внести в эту функцию.

Это позволит вам остановить таймер и начать новый: 

// stop the interval using the timer reference
clearInterval(interval);

var newInterval = setInterval(updateTime, 1000);

Полная программа (из codepen) 

$(document).ready(function() {
  let interval;

  $("#la").click(function() {
    clear(interval);

    interval = setInterval(function() {
      $("#time").text(
        moment()
        .tz("America/Los_Angeles")
        .format("hh:mm:ss a")
      );
    });
  });

  $('#east').click(function() {
    clear(interval);

    interval = setInterval(function() {
      $('#time').text(moment().tz('America/New_York').format('hh:mm:ss a'));
    });
  });

  $('#clear').click(function() {
    clearInterval(interval);
  });
});

function clear(interval) {
  clearInterval(interval);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js" type="text/javascript"></script>

<p id="time">00:00</p>
<button id="la">Arizona</button>
<button id="east">East</button>
<button id="clear">Clear</button>
...