计时器每 5 分钟运行一次 React JS (javascript)答案

【问题标题】：Timer run every 5 minutes React JS (javascript)计时器每 5 分钟运行一次 React JS (javascript)
【发布时间】：2020-08-19 02:53:13
【问题描述】：

我想每 5 分钟设置一次计时器。示例：计时器倒计时 5 分钟仅在 00:00 、 00:05 、 00:10 、 00:15 等时间 00:17 计时器应倒计时 3 分钟

setTimeout 和 setInterval 怎么用那个规定？我想以编程方式在 React JS 中使用 javascript，任何人都可以帮助我吗？

【问题讨论】：

这能回答你的问题吗？ javascript setInterval
@kmoser— setInterval 不是一个好方法。最好使用 setTimeout 的顺序调用并计算下一个 5 分钟滴答的时间，例如 timeToTick = Date.now() % 300000。
@RobG 我应该如何编码？你能帮帮我吗？
另见setTimeout vs setInterval in javascript。

标签： javascript reactjs

【解决方案1】：

如果您希望函数在特定时钟时间运行，例如每整分钟，通常最好将 setTimeout 与顺序调用一起使用。这样，您可以计算出下一个完整“滴答”的时间并设置该间隔的超时。这可以防止由于系统忙于累积而导致的小滞后，从而导致时间漂移。

使用 setInterval 会累积延迟，因此时间会慢慢漂移。第一次运行需要 setTimeout 才能在正确的时间启动它（例如下一个完整的滴答声）。

这是一个简单的例子，可以在任何你想要的时间点上运行一个函数，以毫秒为单位。该示例是每 30 秒滴答一次，但如果您想要 5 分钟，只需使用 3e5 调用它（即 5 * 60 * 1000 = 300,000，即 5 分钟内的毫秒数）。然后它将在下一个完整的滴答声以及之后的每个滴答声中运行，直到被取消。

setTimeout 还返回一个标识符（计时器 ID，示例中未使用），如果需要，您可以使用它来停止它。

/**
 * Run a function on every tick at specified interval. First
 * call of fn is on next tick. May be a few ms late depending
 * on system load when fn due to run.
 *
 * @param {Function} fn - function to call
 * @param {number} tick - clock tick to run function on in milliseconds
 *                        e.g. 30 secs = 3e4, 1 min = 6e4, 5 min = 3e5
 */
function onEveryTick(fn, tick) {
  // Time to next tick
  let getTick = () => tick - (Date.now() % tick);
  // Currie function to sequentially call itself
  let f = () => {
    fn();
    setTimeout(f, getTick());
  }
  // First call after required lag
  setTimeout(f, getTick());
}

// Call on 30 second tick
onEveryTick(() => console.log('Tick ' + new Date().toString()), 3e4);

【讨论】：