在后台选项卡上运行画布

Run canvas on background tab

本文关键字：运行 后台 选项      更新时间：2023-09-26

我最近创建了一个HTML5画布动画（也使用Processing.js）。

问题是当我将浏览器切换到其他选项卡时，动画停止播放。

如何允许动画在用户位于与包含动画的选项卡不同的选项卡上时继续播放？

例：http://jsfiddle.net/EyFTr/3/

如果您

切换选项卡，时钟会停止，但如果您打开链接一个新窗口并模糊窗口，时钟仍然会移动。

简短的回答是你不能。

https://developer.mozilla.org/en/DOM/window.setTimeout

在（Firefox 5.0/Thunderbird 5.0/SeaMonkey 2.2）和Chrome 11中，超时被限制为在非活动选项卡中每秒（1000ms）触发的频率不超过一次;请参阅Mozilla中有关此内容的更多信息，请参阅错误633421，或在Chrome中有关此内容的详细信息，请参阅 crbug.com/66078。

有问题的浏览器在该引用中有点旧，但它仍然相关。这是设计使然。这是为了在选项卡未处于活动状态时减少处理器负载。（处理.js将setTimeout用于动画）

有几种方法可以"修复"此问题。它们涉及检查时间，并在选项卡处于活动状态后根据时间计算对象"应该"的位置。然而，在你的例子中，虽然看起来你的代码会这样做，因为它是一个基于时间的时钟。

正如Loktar所建议的那样，这种症状可以通过检查时间并弄清楚你应该在哪里来缓解。这是一个可以做到这一点的函数：

function smartInterval(func, interval){
    var last = new Date() - interval,
        now,
        numMissed;
    (function iterate(){
        func();
        // compute the number of iterations you might have missed
        // if you tabbed away and the interval was restricted to 1000ms
        now = +new Date();
        numMissed = Math.round((now - last) / interval) - 1;
        // make up for those iterations that were lost
        while (numMissed--) { func(); }
        last = +new Date();
        setTimeout(iterate, interval);
    })();
}

用法：

smartInterval(function(){console.log('hi');}, 100);

这是一个带有示例的 jsFiddle。尝试注释掉while循环（while (numMissed--)），看看通过切换到选项卡，你会得到更少的数字。然而，有了while循环，间隔似乎从未改变过。

不幸的是，这可能对您没有任何用处，因为您使用的是处理.js并且超时是在内部设置的。

请参阅 setInterval 在 Chrome 上无法正常工作。从本质上讲，浏览器在后台运行时会弄乱 setInterval 以提高性能，因此您无法准确控制会发生什么。

相关文章：