我有一个setInterval，每秒运行一段代码30次。这工作得很好，但是当我选择另一个选项卡(使我的代码选项卡变得不活跃)，setInterval由于某种原因被设置为空闲状态。
我制作了这个简化的测试用例(http://jsfiddle.net/7f6DX/3/):
var $div = $('div');
var a = 0;
setInterval(function() {
a++;
$div.css("left", a)
}, 1000 / 30);
如果您运行这段代码，然后切换到另一个选项卡，等待几秒钟并返回，动画将继续在切换到另一个选项卡时的位置。
因此，如果标签处于非活动状态，动画不会每秒运行30次。这可以通过计算每秒调用setInterval函数的次数来确认——如果选项卡处于非活动状态，这将不是30，而是1或2。
我想这样做是为了提高系统性能，但是有什么方法可以禁用这种行为吗?
这在我看来是劣势。
当前回答
这是一个很老的问题，但我遇到了同样的问题。
如果你在chrome上运行你的网页，你可以阅读这篇文章在chrome 57的背景标签。
基本上间隔计时器可以运行，如果它没有耗尽定时器预算。
预算的消耗基于计时器内任务的CPU时间使用情况。
基于我的场景，我将视频绘制到画布上并传输到WebRTC。
webrtc视频连接将保持更新，即使标签是不活跃的。
然而，你必须使用setInterval而不是requestAnimationFrame，但是itt不推荐用于UI渲染。
最好是监听visibilityChange事件并相应地改变渲染机制。
此外，您可以尝试Kaan Soral建议的方法，它应该可以根据文档工作。
其他回答
我能够调用我的回调函数在至少250ms使用音频标签和处理其ontimeupdate事件。它一秒钟被调用3-4次。这比一秒钟的滞后setTimeout要好
这是我的粗略解决方案
(function(){
var index = 1;
var intervals = {},
timeouts = {};
function postMessageHandler(e) {
window.postMessage('', "*");
var now = new Date().getTime();
sysFunc._each.call(timeouts, function(ind, obj) {
var targetTime = obj[1];
if (now >= targetTime) {
obj[0]();
delete timeouts[ind];
}
});
sysFunc._each.call(intervals, function(ind, obj) {
var startTime = obj[1];
var func = obj[0];
var ms = obj[2];
if (now >= startTime + ms) {
func();
obj[1] = new Date().getTime();
}
});
}
window.addEventListener("message", postMessageHandler, true);
window.postMessage('', "*");
function _setTimeout(func, ms) {
timeouts[index] = [func, new Date().getTime() + ms];
return index++;
}
function _setInterval(func, ms) {
intervals[index] = [func, new Date().getTime(), ms];
return index++;
}
function _clearInterval(ind) {
if (intervals[ind]) {
delete intervals[ind]
}
}
function _clearTimeout(ind) {
if (timeouts[ind]) {
delete timeouts[ind]
}
}
var intervalIndex = _setInterval(function() {
console.log('every 100ms');
}, 100);
_setTimeout(function() {
console.log('run after 200ms');
}, 200);
_setTimeout(function() {
console.log('closing the one that\'s 100ms');
_clearInterval(intervalIndex)
}, 2000);
window._setTimeout = _setTimeout;
window._setInterval = _setInterval;
window._clearTimeout = _clearTimeout;
window._clearInterval = _clearInterval;
})();
我为那些试图在计时器函数中解决这个问题的人带来了一个简单的解决方案，正如@kbtzr在另一个答案中提到的那样，我们可以使用Date对象而不是固定增量来计算自开始以来经过的时间，即使您离开了应用程序的选项卡，这也可以工作。
这是HTML示例。
<body>
<p id="time"></p>
</body>
然后这个JavaScript:
let display = document.querySelector('#time')
let interval
let time
function startTimer() {
let initialTime = new Date().getTime()
interval = setInterval(() => {
let now = new Date().getTime()
time = (now - initialTime) + 10
display.innerText = `${Math.floor((time / (60 * 1000)) % 60)}:${Math.floor((time / 1000) % 60)}:${Math.floor((time / 10) % 100)}`
}, 10)
}
startTimer()
这样，即使由于非活动选项卡的性能原因而增加了间隔值，所做的计算也将保证正确的时间。这是一个普通的代码，但我在我的React应用程序中使用了这种逻辑，你也可以在任何你需要的地方修改它。
受Ruslan Tushov图书馆的影响，我创建了自己的小型图书馆。只需在<head>中添加脚本，它将修补setInterval和setTimeout与那些使用WebWorker的。
对我来说，像其他人一样在后台播放音频并不重要，我的问题是我有一些动画，当你在其他选项卡中回到它们时，它们就像疯了一样。我的解决方案是把这些动画放在里面，如果这是防止非活动标签:
if (!document.hidden){ //your animation code here }
多亏了这个，我的动画只有在TAB激活时才会运行。 我希望这能对我的案子有所帮助。
