我有一个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。

我想这样做是为了提高系统性能,但是有什么方法可以禁用这种行为吗?

这在我看来是劣势。


当前回答

我能够调用我的回调函数在至少250ms使用音频标签和处理其ontimeupdate事件。它一秒钟被调用3-4次。这比一秒钟的滞后setTimeout要好

其他回答

这是一个很老的问题,但我遇到了同样的问题。

如果你在chrome上运行你的网页,你可以阅读这篇文章在chrome 57的背景标签。

基本上间隔计时器可以运行,如果它没有耗尽定时器预算。

预算的消耗基于计时器内任务的CPU时间使用情况。

基于我的场景,我将视频绘制到画布上并传输到WebRTC。

webrtc视频连接将保持更新,即使标签是不活跃的。

然而,你必须使用setInterval而不是requestAnimationFrame,但是itt不推荐用于UI渲染。

最好是监听visibilityChange事件并相应地改变渲染机制。

此外,您可以尝试Kaan Soral建议的方法,它应该可以根据文档工作。

setInterval和requestAnimationFrame都不工作时,选项卡是不活跃的或工作,但不是在正确的时间。一种解决方案是使用另一个时间事件源。例如,web套接字或web工作者是两个事件源,当选项卡是非活动的时候工作得很好。所以不需要把你所有的代码都移动到一个web worker,只需要使用worker作为一个time事件源:

// worker.js
setInterval(function() {
    postMessage('');
}, 1000 / 50);

.

var worker = new Worker('worker.js');
var t1 = 0;
worker.onmessage = function() {
    var t2 = new Date().getTime();
    console.log('fps =', 1000 / (t2 - t1) | 0);
    t1 = t2;
}

这个示例的Jsfiddle链接。

我在使用HTML5播放器时也遇到了同样的问题。当标签变成非活动时,它被卡住了。 所以我发现WebWorker允许使用没有限制的间隔/超时。我用它来张贴“tick”到主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;
    }
});

我能够调用我的回调函数在至少250ms使用音频标签和处理其ontimeupdate事件。它一秒钟被调用3-4次。这比一秒钟的滞后setTimeout要好

对我来说,像其他人一样在后台播放音频并不重要,我的问题是我有一些动画,当你在其他选项卡中回到它们时,它们就像疯了一样。我的解决方案是把这些动画放在里面,如果这是防止非活动标签:

if (!document.hidden){ //your animation code here }

多亏了这个,我的动画只有在TAB激活时才会运行。 我希望这能对我的案子有所帮助。