javascript - MomentJS 重置/重用 DOM 元素来显示新时间

Question

我现在已经在 3 个项目中遇到了这个问题，并且每次都完全放弃了这个概念。我想要一个名为 general_current-time 的 DOM 元素，它可以动态更改以匹配事件位置的当前时间。

当前发生的情况是第一次运行将按预期执行，但任何替换它的尝试仍将继续迭代第一个请求的时间。

我尝试在开始新的时间间隔之前清除该字段或替换文本。

有没有办法停止间隔并创建一个新的间隔？

下面的示例(已更新):

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

Answer 1

如果您想清除它，则必须存储对 setInterval 的引用。

var timer = setInterval(...)

我还建议将其逻辑放入一个单独的函数中，以便在需要时调用，并缓存您的 jQuery 选择器。在计时器的每次迭代中检查时区是额外的工作(我怀疑客户端是否经常更改时区，如果有的话)，并增加延迟以匹配显示的精度(在这种情况下，您显示的精度为秒，但您调用每秒间隔 10 次；这意味着 10 次调用中有 9 次是多余的)

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