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方法中返回一个函数，这将是您的destroy方法，因为每次创建interval时Closure都可以使用它自己对它的_INTERVAL变量的引用。看看下面我如何有一个间隔调用数组，然后在10秒后我对所有这些调用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)

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

3 个答案: