我如何才能使setInterval也工作时，一个标签是不活跃的Chrome?

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

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

这在我看来是劣势。

在大多数浏览器上，不活跃的选项卡执行优先级低，这可能会影响JavaScript计时器。

如果你的过渡值是使用帧间的实时时间间隔来计算的，而不是每个间隔上的固定增量，你不仅可以解决这个问题，而且还可以通过使用requestAnimationFrame来实现屏蔽动画，因为如果处理器不是很忙的话，它可以达到60fps。

下面是一个使用requestAnimationFrame实现动画属性转换的JavaScript示例:

对于后台任务(与ui无关)

@UpTheCreek评论:

表现问题没问题，但还是有些事情你需要继续做下去。

如果你有后台任务需要在给定的时间间隔内精确执行，你可以使用HTML5 Web Workers。看看下面Möhre的回答，了解更多细节…

CSS vs JS的“动画”

这个问题和其他许多问题都可以通过使用CSS转换/动画来避免，而不是基于JavaScript的动画，这会增加相当大的开销。我推荐这个jQuery插件，它可以让你像animate()方法一样从CSS过渡中受益。

2011-05-08 12:34:17

只要这样做:

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规范允许的最小值:4毫秒(而不是以前的10毫秒)。

2011-09-12 12:35:45

我认为最好的理解这个问题的例子是:http://jsfiddle.net/TAHDb/

我在这里做了一件简单的事情:

间隔1秒，每次隐藏第一个跨度，并将其移动到最后，并显示第二个跨度。

如果你停留在页面上，它就像它所设想的那样工作。但如果你把标签隐藏了几秒钟，当你回来的时候，你会看到一个奇怪的东西。

这就像所有在你现在不活跃的时候没有发生的事情都会在一次发生一样。所以在几秒钟内你会看到X个事件。它们是如此之快，以至于有可能同时看到所有6个跨度。

所以它接缝铬只延迟事件，所以当你回来所有的事件将发生，但所有的一次…

这是一个简单的幻灯片的实际应用。想象数字是图像，如果用户保持标签隐藏，当他回来的时候，他会看到所有的imgs浮动，完全混乱。

要解决这个问题，请像pimvdb告诉的那样使用stop(true,true)。这将清除事件队列。

2011-11-07 17:26:37

我在使用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;
    }
});

2012-09-20 23:58:00

有一种使用Web Workers的解决方案(如前所述)，因为它们运行在单独的进程中，不会减慢速度

我已经写了一个小的脚本，可以在不更改代码的情况下使用-它只是覆盖函数setTimeout, clearTimeout, setInterval, clearInterval。

只需在所有代码之前包含它。

更多信息请点击这里

2015-06-28 22:19:58

这是我的粗略解决方案

(function(){
var index = 1;
var intervals = {},
    timeouts = {};

function postMessageHandler(e) {
    window.postMessage('', "*");

    var now = new Date().getTime();

    sysFunc._each.call(timeouts, function(ind, obj) {
        var targetTime = obj[1];

        if (now >= targetTime) {
            obj[0]();
            delete timeouts[ind];
        }
    });
    sysFunc._each.call(intervals, function(ind, obj) {
        var startTime = obj[1];
        var func = obj[0];
        var ms = obj[2];

        if (now >= startTime + ms) {
            func();
            obj[1] = new Date().getTime();
        }
    });
}
window.addEventListener("message", postMessageHandler, true);
window.postMessage('', "*");

function _setTimeout(func, ms) {
    timeouts[index] = [func, new Date().getTime() + ms];
    return index++;
}

function _setInterval(func, ms) {
    intervals[index] = [func, new Date().getTime(), ms];
    return index++;
}

function _clearInterval(ind) {
    if (intervals[ind]) {
        delete intervals[ind]
    }
}
function _clearTimeout(ind) {
    if (timeouts[ind]) {
        delete timeouts[ind]
    }
}

var intervalIndex = _setInterval(function() {
    console.log('every 100ms');
}, 100);
_setTimeout(function() {
    console.log('run after 200ms');
}, 200);
_setTimeout(function() {
    console.log('closing the one that\'s 100ms');
    _clearInterval(intervalIndex)
}, 2000);

window._setTimeout = _setTimeout;
window._setInterval = _setInterval;
window._clearTimeout = _clearTimeout;
window._clearInterval = _clearInterval;
})();

2016-01-28 01:56:43

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

2016-12-30 00:46:50

受Ruslan Tushov图书馆的影响，我创建了自己的小型图书馆。只需在<head>中添加脚本，它将修补setInterval和setTimeout与那些使用WebWorker的。

2017-08-17 12:28:11

播放音频文件可以确保Javascript的完整后台性能

对我来说，这是最简单和侵入性最小的解决方案——除了播放微弱/几乎空的声音，没有其他潜在的副作用

你可以在这里找到详细信息:https://stackoverflow.com/a/51191818/914546

(从其他回答中，我看到一些人使用音频标签的不同属性，我想知道是否有可能使用音频标签的完整性能，而不实际播放一些东西)

2018-07-05 13:01:30

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

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

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

2018-12-27 11:36:40

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链接。

2019-01-29 05:42:42

注意:这个解决方案不适合如果你喜欢你的间隔工作在背景上，例如，播放音频或其他东西。但如果你感到困惑，例如当你回到页面或选项卡时，你的动画不能正常工作，这是一个很好的解决方案。

有很多方法可以实现这个目标，也许“WebWorkers”是最标准的一个，但当然，它不是最简单和方便的一个，特别是如果你没有足够的时间，所以你可以试试这种方法:

基本概念:

为你的间隔(或动画)建立一个名字，并设置你的间隔(动画)，所以它会运行时，用户第一次打开你的页面:var interval_id = setInterval(your_func, 3000); 通过$(window).focus(function() {});$(window).blur(function() {});你可以clearInterval(interval_id)每次浏览器(标签)是去激活和重新运行你的间隔(动画)每次浏览器(标签)将再次激活interval_id = setInterval();

示例代码:

var interval_id = setInterval(your_func, 3000);

$(window).focus(function() {
    interval_id = setInterval(your_func, 3000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

2019-02-05 01:03:51

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

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

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

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

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

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

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

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

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

2020-02-19 09:23:43

我为那些试图在计时器函数中解决这个问题的人带来了一个简单的解决方案，正如@kbtzr在另一个答案中提到的那样，我们可以使用Date对象而不是固定增量来计算自开始以来经过的时间，即使您离开了应用程序的选项卡，这也可以工作。

这是HTML示例。

<body>
  <p id="time"></p>
</body>

然后这个JavaScript:

let display = document.querySelector('#time')
let interval
let time
function startTimer() {
    let initialTime = new Date().getTime()
    interval = setInterval(() => {
        let now = new Date().getTime()
        time = (now - initialTime) + 10
        display.innerText = `${Math.floor((time / (60 * 1000)) % 60)}:${Math.floor((time / 1000) % 60)}:${Math.floor((time / 10) % 100)}`
    }, 10)
}
startTimer()

这样，即使由于非活动选项卡的性能原因而增加了间隔值，所做的计算也将保证正确的时间。这是一个普通的代码，但我在我的React应用程序中使用了这种逻辑，你也可以在任何你需要的地方修改它。

2022-01-26 22:12:30

有一个解决这个问题的方法，尽管实际上标签必须在某些窗口中被激活。

让你的非活动标签成为一个单独的浏览器窗口。不要让任何其他窗口最大化(除非最大化的窗口在你的后面)。

这应该给浏览器一个始终处于活动状态的印象。

这有点麻烦，但也是一个快速的胜利。只要你能控制窗户的排列。

2022-04-10 10:39:45

我修改了Lacerda的回应，添加了一个功能正常的UI。

我添加了启动/恢复/暂停/停止操作。

2022-05-24 13:29:08

我如何才能使setInterval也工作时，一个标签是不活跃的Chrome?

推荐文章

最新文章

标签