Question

我构建了一个Web应用程序，我使用setInterval和500ms计时器进行一些时钟。

当窗口处于活动状态时，时钟运行完美，我用它：

var tempTimer = 0;
setInterval(function () {
    goTimer()
}, 500);

function goTimer() {
    tempTimer++;
    $("#timer").val(tempTimer);
}

但问题是窗口/标签变为非活动状态 - 间隔时间变为1000毫秒！

当我再次聚焦窗口/标签时，它会变回500毫秒。

检查一下：http://jsfiddle.net/4Jw37/

非常感谢。

Answer 1

是的，这种行为是有意的。

请参阅MDN article：

In（Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2）和Chrome 11，超时被限制为每秒不超过一次发射（1000毫秒）非活动标签;有关详细信息，请参阅bug 633421 这在Mozilla或crbug.com/66078中有关Chrome的详细信息。

spec说：

注意：此API不保证计时器将完全运行时间表。由于CPU负载，其他任务等导致的延迟预期

Answer 2

你似乎想要一个每半秒递增一次的计时器。通过跟踪自开始和进行数学运算以来的总时间，您可以更加准确地做到这一点。

var tempTimer = 0;
var startedTimer = Date.now();
setInterval(goTimer, 250); // a little more often in case of drift

function goTimer() {
    tempTimer = Math.floor((Date.now() - startedTimer) / 500);
    $("#timer").val(tempTimer);
}

在此处查看此工作：http://jsfiddle.net/4Jw37/2/

所以这会每半秒更新一次，但它并不需要。如果它跳过一些节拍，它将在下次触发时自行修复，因为它会重新计算每次都基于自开始跟踪以来的时间。现在，函数运行的次数对计数器的值没有影响。

换句话说，不要问你增加计数的次数。而是询问自你开始以来已经过了多少半秒段。

Answer 3

对于时间间隔，浏览器在活动和非活动窗口中的行为可能不同。

您可以做什么，在设置时间间隔时，您可以保存时间戳（初始时间）。在window.onfocus上，在那里采用时间戳（现在）找到初始时间和现在之间的差异，然后使用更新tempTimer。

选项卡/窗口处于非活动状态时，setInterval变慢

3 个答案: