当选项卡在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 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;
    }});

Answer 2

有一个使用WebWorker的解决方案(如前所述)，因为它们在单独的进程中运行，并且不会减慢

我已经编写了一个很小的脚本，它可以在不改变代码的情况下使用-它简单地覆盖了函数setTimeout、ClearTimeout、setInterval、ClearInterval。

把它包括在你所有的代码之前。