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

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

这在我看来是劣势。

当前回答

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

有很多方法可以实现这个目标，也许“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

其他回答

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

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

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

更多信息请点击这里

2015-06-28 22:19:58

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

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

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

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

2018-07-05 13:01:30

我为那些试图在计时器函数中解决这个问题的人带来了一个简单的解决方案，正如@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

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

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

2022-05-24 13:29:08

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

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

推荐文章

最新文章

标签