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>

MomentJS重置/重用DOM元素以显示新时间

1 个答案: