在背景选项卡上运行画布

Question

我最近创建了一个HTML5画布动画(也是使用Processing.js)。

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

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

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

如果您切换标签，时钟停止，但如果您打开一个新的窗口和模糊的窗口，时钟仍将移动。

Answer 1

简短的回答是你不能。

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

在(Firefox5.0/ Thunderbird 5.0 /Crbug.com/ SeaMonkey 2.2)和Chrome11中，超时被限制为在非活动选项卡中每秒触发一次(1000ms)；有关此问题的详细信息，请参阅错误633421或crbug.com/66078中有关此问题的详细信息。

有问题的浏览器在这句话中有点老了，但它仍然是相关的。这是设计好的。这是为了在标签处于非活动状态时减少处理器负载。(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，所以你不能控制到底发生了什么。