我如何才能使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。

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

这在我看来是劣势。

当前回答

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

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

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

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

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

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

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

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

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

2020-02-19 09:23:43

其他回答

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

2016-12-30 00:46:50

在大多数浏览器上，不活跃的选项卡执行优先级低，这可能会影响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

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

2017-08-17 12:28:11

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

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

2022-05-24 13:29:08

这是我的粗略解决方案

(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

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

推荐文章

最新文章

标签