Question

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

问题在于，当我将浏览器切换到另一个标签时，动画停止播放。

当用户位于与包含动画的标签不同的标签上时，如何让动画继续播放？

如果你切换标签，时钟会停止，但如果你打开链接一个新窗口并模糊窗口，时钟仍会移动。

Answer 1

简短的回答是你不能。

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

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

有问题的浏览器在该引用中有点陈旧但仍然相关。这是设计的。它可以在选项卡未激活时减少处理器负载。（Processing.js使用setTimeout制作动画）

有几种方法可以“解决”这个问题。它们涉及检查时间，并在标签变为活动状态时计算对象“应该”基于时间的位置。在你的例子中，虽然看起来你的代码会这样做，因为它是一个基于时间的时钟。

Answer 2

正如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);

Here is a jsFiddle with an example.尝试注释掉while循环（while (numMissed--)）以查看通过切换到标签，您获得的数字更少。但是，在while循环中，似乎区间从未改变过。

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

Answer 3

见setInterval not working properly on Chrome。基本上浏览器会在后台运行时使用setInterval以提高性能，因此无法准确控制发生的情况。

在背景选项卡上运行画布

3 个答案: