当一个标签在Chrome中处于非活动状态时，我如何让setInterval也能工作？
我有一个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次。
我猜这是为了提高性能而设计的，但是有没有办法禁用这种行为呢？在我的场景中，这实际上是一个缺点。
回答 10
Stack Overflow用户
发布于 2012-09-21 07:58:00
我在音频淡出和HTML5播放器上遇到了同样的问题。当选项卡不活动时，它被卡住了。所以我发现WebWorker可以无限制地使用间隔/超时。我使用它将"ticks“发送到主javascript。
WebWorkers代码：
var fading = false;
var interval;
self.addEventListener('message', function(e){
switch (e.data) {
case 'start':
if (!fading){
fading = true;
interval = setInterval(function(){
self.postMessage('tick');
}, 50);
}
break;
case 'stop':
clearInterval(interval);
fading = false;
break;
};
}, false);主要Javascript：
var player = new Audio();
player.fader = new Worker('js/fader.js');
player.faderPosition = 0.0;
player.faderTargetVolume = 1.0;
player.faderCallback = function(){};
player.fadeTo = function(volume, func){
console.log('fadeTo called');
if (func) this.faderCallback = func;
this.faderTargetVolume = volume;
this.fader.postMessage('start');
}
player.fader.addEventListener('message', function(e){
console.log('fader tick');
if (player.faderTargetVolume > player.volume){
player.faderPosition -= 0.02;
} else {
player.faderPosition += 0.02;
}
var newVolume = Math.pow(player.faderPosition - 1, 2);
if (newVolume > 0.999){
player.volume = newVolume = 1.0;
player.fader.postMessage('stop');
player.faderCallback();
} else if (newVolume < 0.001) {
player.volume = newVolume = 0.0;
player.fader.postMessage('stop');
player.faderCallback();
} else {
player.volume = newVolume;
}
});Stack Overflow用户
发布于 2015-06-29 06:19:58
有一种使用Web Workers的解决方案(如前所述)，因为它们在单独的进程中运行，并且不会减慢速度
我已经写了一个很小的脚本，不需要修改你的代码就可以使用--它简单的覆盖了setTimeout，clearTimeout，setInterval，clearInterval函数。
只需将其包含在所有代码之前即可。
Stack Overflow用户
发布于 2011-09-12 20:35:45
只需执行以下操作：
var $div = $('div');
var a = 0;
setInterval(function() {
a++;
$div.stop(true,true).css("left", a);
}, 1000 / 30);非活动浏览器选项卡缓冲了一些setInterval或setTimeout函数。
stop(true,true)将停止所有缓冲的事件，并仅立即执行最后一个动画。
window.setTimeout()方法现在限制为在非活动选项卡中每秒发送不超过一个超时。此外，它现在将嵌套超时钳位到HTML5规范允许的最小值:4ms(而不是以前钳位到的10ms)。
https://stackoverflow.com/questions/5927284
复制相似问题