转到另一个 chrome 选项卡时，setInterval 计时器会更慢答案

【问题标题】：setInterval timer be more slower when go another chrome tab转到另一个 chrome 选项卡时，setInterval 计时器会更慢
【发布时间】：2019-03-24 12:59:39
【问题描述】：

我构建了一个倒数计时器，所以 - 当我停留在倒数镀铬标签时，它工作正常。但是当我转到另一个选项卡（倒计时）运行时，它会变慢。

例如，当您开始倒计时 30 秒，然后转到另一个选项卡 10 秒时，当您返回倒计时选项卡时，它将在 24 秒内 - 而不是 20 秒（这只是一个非常多变的示例） .

stopper = setTimeout(progressCountdown, 1000);

progressCountdown 函数在这里不需要，因为当我在倒计时选项卡中时它工作正常。

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： javascript

【解决方案1】：

不保证在给定延迟之后运行超时。实际上，延迟会比您给出的延迟更长的原因可能有很多，例如，如果您的网页或 CPU 工作负载过重，或者浏览器为了节省电力和电池而对其进行了节流（这是许多浏览器对背景选项卡做了什么）。 MDN has a list with many reasons why these things may occur.

然而，您的实际问题似乎是您正在使用超时来跟踪时间本身。由于上述问题，这通常会非常不准确。您应该做的是使用时钟来跟踪超时触发之前花费的时间：

// performance.now() is a good way of measuring durations
let atStart = performance.now();

function timeoutCallback() {
  let now = performance.now();
  
  // milliseconds is accurate now matter how long the timeout actually took
  // no matter if in foreground or in background tab
  let milliseconds = now - atStart;

  // number of seconds left
  let secondsLeft = Math.ceil(30 - milliseconds / 1000);
  console.log('Countdown: ' + secondsLeft);

  if(secondsLeft > 0)
    setTimeout(timeoutCallback, 1000);
}

setTimeout(timeoutCallback, 1000);

【讨论】：

您的代码很棒，但仅用于跟踪，我尝试考虑如何将您的代码与我的倒计时合并，但我没有。
@AmandaWhite 我已将示例更新为实际倒计时，希望对您有所帮助。