当选项卡在Chrome中不活动时，如何使setInterval也工作？

Question

当选项卡在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。

我想这是通过设计来提高性能的，但有没有办法阻止这种行为呢？在我的场景中，这实际上是一个缺点。

Answer 1

我遇到了同样的问题，音频衰落和HTML 5播放器。当选项卡变得不活跃时，它就被塞了起来。因此，我发现WebWorker可以不受限制地使用间隔/超时。我使用它将“ticks”发布到主javascript。“网络工人守则”：var&nbsp;fading&nbsp;=&nbsp;false;var&nbsp;interval;self.addEventListener('message',&nbsp;function(e){ &nbsp;&nbsp;&nbsp;&nbsp;switch&nbsp;(e.data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'start': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!fading){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fading&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval&nbsp;=&nbsp;setInterval(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.postMessage('tick'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;50); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'stop': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(interval); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fading&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;};},&nbsp;false);主要Javascript：var&nbsp;player&nbsp;=&nbsp;new&nbsp;Audio();player.fader&nbsp;=&nbsp;new&nbsp;Worker('js/fader.js');player.faderPosition&nbsp;=&nbsp;0.0;player.faderTargetVolume&nbsp;=&nbsp;1.0; player.faderCallback&nbsp;=&nbsp;function(){};player.fadeTo&nbsp;=&nbsp;function(volume,&nbsp;func){ &nbsp;&nbsp;&nbsp;&nbsp;console.log('fadeTo&nbsp;called'); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(func)&nbsp;this.faderCallback&nbsp;=&nbsp;func; &nbsp;&nbsp;&nbsp;&nbsp;this.faderTargetVolume&nbsp;=&nbsp;volume; &nbsp;&nbsp;&nbsp;&nbsp;this.fader.postMessage('start');}player.fader.addEventListener('message',&nbsp;function(e){ &nbsp;&nbsp;&nbsp;&nbsp;console.log('fader&nbsp;tick'); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(player.faderTargetVolume&nbsp;>&nbsp;player.volume){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.faderPosition&nbsp;-=&nbsp;0.02; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.faderPosition&nbsp;+=&nbsp;0.02; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;newVolume&nbsp;=&nbsp;Math.pow(player.faderPosition&nbsp;-&nbsp;1,&nbsp;2); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(newVolume&nbsp;>&nbsp;0.999){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.volume&nbsp;=&nbsp;newVolume&nbsp;=&nbsp;1.0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.fader.postMessage('stop'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.faderCallback(); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(newVolume&nbsp;<&nbsp;0.001)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.volume&nbsp;=&nbsp;newVolume&nbsp;=&nbsp;0.0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.fader.postMessage('stop'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.faderCallback(); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player.volume&nbsp;=&nbsp;newVolume; &nbsp;&nbsp;&nbsp;&nbsp;}});

Answer 2

有一个使用WebWorker的解决方案(如前所述)，因为它们在单独的进程中运行，并且不会减慢我已经编写了一个很小的脚本，它可以在不改变代码的情况下使用-它简单地覆盖了函数setTimeout、ClearTimeout、setInterval、ClearInterval。把它包括在你所有的代码之前。