我有一个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。
我想这样做是为了提高系统性能，但是有什么方法可以禁用这种行为吗?
这在我看来是劣势。
当前回答
这是我的粗略解决方案
(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;
})();
其他回答
有一种使用Web Workers的解决方案(如前所述)，因为它们运行在单独的进程中，不会减慢速度
我已经写了一个小的脚本，可以在不更改代码的情况下使用-它只是覆盖函数setTimeout, clearTimeout, setInterval, clearInterval。
只需在所有代码之前包含它。
更多信息请点击这里
对我来说，像其他人一样在后台播放音频并不重要，我的问题是我有一些动画，当你在其他选项卡中回到它们时，它们就像疯了一样。我的解决方案是把这些动画放在里面，如果这是防止非活动标签:
if (!document.hidden){ //your animation code here }
多亏了这个，我的动画只有在TAB激活时才会运行。 我希望这能对我的案子有所帮助。
在大多数浏览器上，不活跃的选项卡执行优先级低，这可能会影响JavaScript计时器。
如果你的过渡值是使用帧间的实时时间间隔来计算的，而不是每个间隔上的固定增量，你不仅可以解决这个问题，而且还可以通过使用requestAnimationFrame来实现屏蔽动画，因为如果处理器不是很忙的话，它可以达到60fps。
下面是一个使用requestAnimationFrame实现动画属性转换的JavaScript示例:
var target = document.querySelector('div#target') var startedAt, duration = 3000 var domain = [-100, window.innerWidth] var range = domain[1] - domain[0] function start() { startedAt = Date.now() updateTarget(0) requestAnimationFrame(update) } function update() { let elapsedTime = Date.now() - startedAt // playback is a value between 0 and 1 // being 0 the start of the animation and 1 its end let playback = elapsedTime / duration updateTarget(playback) if (playback > 0 && playback < 1) { // Queue the next frame requestAnimationFrame(update) } else { // Wait for a while and restart the animation setTimeout(start, duration/10) } } function updateTarget(playback) { // Uncomment the line below to reverse the animation // playback = 1 - playback // Update the target properties based on the playback position let position = domain[0] + (playback * range) target.style.left = position + 'px' target.style.top = position + 'px' target.style.transform = 'scale(' + playback * 3 + ')' } start() body { overflow: hidden; } div { position: absolute; white-space: nowrap; } <div id="target">...HERE WE GO</div>
对于后台任务(与ui无关)
@UpTheCreek评论:
表现问题没问题，但还是 有些事情你需要继续做下去。
如果你有后台任务需要在给定的时间间隔内精确执行，你可以使用HTML5 Web Workers。看看下面Möhre的回答，了解更多细节…
CSS vs JS的“动画”
这个问题和其他许多问题都可以通过使用CSS转换/动画来避免，而不是基于JavaScript的动画，这会增加相当大的开销。我推荐这个jQuery插件，它可以让你像animate()方法一样从CSS过渡中受益。
播放音频文件可以确保Javascript的完整后台性能
对我来说，这是最简单和侵入性最小的解决方案——除了播放微弱/几乎空的声音，没有其他潜在的副作用
你可以在这里找到详细信息:https://stackoverflow.com/a/51191818/914546
(从其他回答中，我看到一些人使用音频标签的不同属性，我想知道是否有可能使用音频标签的完整性能，而不实际播放一些东西)
这是一个很老的问题，但我遇到了同样的问题。
如果你在chrome上运行你的网页，你可以阅读这篇文章在chrome 57的背景标签。
基本上间隔计时器可以运行，如果它没有耗尽定时器预算。
预算的消耗基于计时器内任务的CPU时间使用情况。
基于我的场景，我将视频绘制到画布上并传输到WebRTC。
webrtc视频连接将保持更新，即使标签是不活跃的。
然而，你必须使用setInterval而不是requestAnimationFrame，但是itt不推荐用于UI渲染。
最好是监听visibilityChange事件并相应地改变渲染机制。
此外，您可以尝试Kaan Soral建议的方法，它应该可以根据文档工作。
