我有一个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次。
我猜这是为了提高性能而设计的,但是有没有办法禁用这种行为呢?在我的场景中,这实际上是一个缺点。
发布于 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;
}
});
发布于 2015-06-29 06:19:58
有一种使用Web Workers的解决方案(如前所述),因为它们在单独的进程中运行,并且不会减慢速度
我已经写了一个很小的脚本,不需要修改你的代码就可以使用--它简单的覆盖了setTimeout,clearTimeout,setInterval,clearInterval函数。
只需将其包含在所有代码之前即可。
发布于 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
复制相似问题