SetInterval - 达到下一分钟时的更改间隔

Question

我有一个计时器，可以在页面上保持更新的时间。

这是基础知识：

function startTimer() {
    setInterval(function () {
        updateTimer();
    }, 1000);
}

如您所见，时间每秒更新一次，但时间占位符仅显示小时和分钟，因此该功能每分钟运行59次太多。

我试图让它每秒检查一次，直到分钟改变，然后将间隔从1秒重置为1分钟。

但是，新的间隔显示为更新但从未启动（它仍然每秒更新）。

function startTimer() {
    var interval = 1000,
        d = new Date(),
        m = d.getMinutes();

    setInterval(function () {
        var d2 = new Date(),
            m2 = d2.getMinutes();

        if (m2 > m) interval = 60000;
        updateTimer();
        console.log(m + " => " + m2 + " => " + interval);
    }, interval);
}

Answer 1

你尝试过这样的事吗？：

function startTimer() {
    var interval = 1000,
        d = new Date(),
        m = d.getMinutes();

    setTimeout(function intervalHandler() {
        var d2 = new Date(),
            m2 = d2.getMinutes();

        if (m2 > m) interval = 60000;
        updateTimer();
        console.log(m + " => " + m2 + " => " + interval);
        setTimeout(intervalHandler, interval)
    }, interval);
}

只需使用setTimeout而不是setInterval。

Answer 2

你必须创建另一个间隔，你不能更新已经运行的间隔，你可以这样做：

function startTimer() {
  var d = new Date(),
      m = d.getMinutes(),
      interval = 1000;
  var minutes;
  var seconds = setInterval(function () {
    var d2 = new Date(),
        m2 = d2.getMinutes();
    if (m2 > m) {
      //here we stop the first interval and we create another that runs every minute
      clearInterval(seconds)
      minutes = setInterval(updateTimer, 60000)
    };
    console.log(m + " => " + m2 + " => " + interval);
    }, interval); 
}

Answer 3

通过将间隔和等待周期存储到功能范围之外的变量中，您可以对当前等待时间和新等待时间进行比较。 这使您可以使用一种方法调用间隔，然后在以后将其重置为另一种方法。

 let wait_tracker = 0 let interval_tracker const interval = (wait = 0, callback) => { if (!callback) { clearInterval(interval_tracker) console.log('cancelling') return } if (wait !== wait_tracker && !!interval_tracker) clearInterval(interval_tracker) interval_tracker = setInterval(callback, wait) } interval(500, () => console.log('tick every .5sec')) setTimeout(() => ( interval(200, () => console.log('tick every .2sec')) ), 5000) setTimeout(interval, 10000) 

另一种方法是从原始interval方法返回一个Function，这将是你的destroy方法，因为每次你创建一个interval ，Closure都能够拥有它自己对它的_INTERVAL变量的引用。 看下面我如何有一个间隔调用数组然后10个seonds后来我在所有这些调用上调用destroy。 这允许我设置多个间隔，但如果我愿意，可以让我控制它来销毁它们。

 const interval = (wait = 0, callback) => { const _INTERVAL = setInterval(callback, wait) return () => { console.log('destroying') clearInterval(_INTERVAL) } } const intervals = [ interval(500, () => console.log('tick every .5sec')), interval(200, () => console.log('tick every .2sec')) ] setTimeout(() => intervals.forEach(destroy => destroy()), 10000)