在背景选项卡上运行画布答案

【问题标题】：Run canvas on background tab在背景选项卡上运行画布
【发布时间】：2012-06-20 15:29:12
【问题描述】：

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

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

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

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

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

【问题讨论】：

你有例子或 jsfiddle 吗？
它适用于我的 Chrome。你在看什么浏览器？
@Ibstr 查看时钟显示的时间，转到其他选项卡，等待 10 秒，然后返回。时钟没有比以前多 10 秒。
@Cristy 嗯，这是给我的。我这里有我的手表可以数数。我一直在秒针为 0 时正确切换标签，然后当我在 15 秒后返回时，它在 15 秒标记处。
好吧，对不起，这个例子很糟糕，我从 processing.js 例子中得到的，时钟不使用增量，它在每一步都得到时间，让我更新例子

标签： javascript canvas processing.js

【解决方案1】：

简短的回答是你不能。

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

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

该引用中的问题浏览器有点旧，但仍然相关。这是设计使然。当标签未激活时，它会减少处理器负载。（Processing.js 使用setTimeout 制作动画）

有几种方法可以“解决”这个问题。它们涉及检查时间，并在选项卡变为活动状态后根据时间计算对象“应该”在哪里。然而，在您的示例中，虽然看起来您的代码会这样做，因为它是一个无论如何都基于时间的时钟。

【讨论】：

是的，但由于代码每次都获得new Date()，所以它应该在标签重新成为焦点时立即更新。对吗？
@lbstr 是的，我刚刚编辑了我的答案。她可能会看到奇怪的“追赶”动画，您在第一次切换到标签后看到手跳，但除此之外它应该是正确的。
Here is a good illustration of the problem. When the tab is active, you get one new row per second.但是，当您切换选项卡并返回时，您将计算的行数比您预期的要少。
@lbstr jsfiddle.net/loktar/TTnbg/3 使它更加相关，因为处理使用了setTimeout 这将是一种情况，尽管您需要检查时间并确保运行正确的迭代量。
Here is a potential solution. 它使用时间戳来确定错过的迭代次数，然后尝试弥补它们。它似乎适用于某些应用程序，但不适用于 Processing.js，因为间隔是在内部完成的。反馈？

【解决方案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 并且超时是在内部设置的。

【讨论】：

对于遇到此问题的其他人来说仍然是一个很好的答案。 +1
我会尝试使用相同的算法来解决问题（在每一帧保存'最后'时间并检查'现在'-'最后'是否更大[选项卡已切换]更新缺少的帧）。一个问题可能是当用户切换回当前选项卡时，动画将以快进方式播放：D
@Cristy 我想知道这是否会发生！在我的示例中，每个步骤都发生得足够快，以至于它似乎会立即更新，但我可以想象这样一种情况，您可能会在它赶上时看到一些滞后。告诉我进展如何！

【解决方案3】：

见setInterval not working properly on Chrome。本质上，浏览器会在后台处理 setInterval 以提高性能，因此您无法准确控制会发生什么。

【讨论】：