即使用户在不同的选项卡中，window.setTimeout 也需要工作答案

【问题标题】：window.setTimeout needs to work even when user is in a different tab即使用户在不同的选项卡中，window.setTimeout 也需要工作
【发布时间】：2014-03-01 00:46:00
【问题描述】：

所以我正在制作一个随着时间的推移赚取积分的游戏，即使用户实际上并没有专注于游戏正在运行的窗口。我在 javascript 中使用 setTimeout() 和 requestAnimationFrame() 函数，我遇到了一个问题。

    //main game loop
    var FPS = 30;
    tick();
    function tick() {
        setTimeout(function() {
            window.requestAnimationFrame(tick);
            //draw everything
            draw();
            //do stuff
            ...stuff...
        }, Math.round(1000/FPS));
    }

我遇到的问题只发生在用户关注不同的选项卡时。如果窗口被收起，或者如果另一个窗口在它上面，游戏仍然运行。这告诉我它与操作系统无关，而是与浏览器无关。而且我发现它在浏览器中也是通用的。即使玩家正在使用另一个选项卡，我也需要运行游戏，我该如何实现？如果有特定于更改选项卡的事件，或者有替代且可靠的计时器功能，那就没问题了。

提前致谢:)

【问题讨论】：

浏览器在隐藏选项卡时将 setTimeout 调用限制为每秒最多 1 次，以最大限度地提高活动选项卡的性能：developer.mozilla.org/en-US/docs/Web/API/… 如果您的目标浏览器支持网络工作者，您可以在 web worker 中运行你的超时函数并绕过这个限制。

标签： javascript jquery focus settimeout requestanimationframe

【解决方案1】：

这是一个示例网络工作者，当标签被隐藏时，它将每秒运行一次以上。不幸的是，并非所有浏览器都支持网络工作者。

var blob = new Blob([
    "onmessage = function(e) { setTimeout(function(){postMessage('draw now'); },100)}"]);

// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);

var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  draw();
  worker.postMessage('start timer');
};
worker.postMessage('start timer'); // Start the worker.

这里的工作示例。即使您的选项卡处于隐藏状态，也可以打开控制台查看计数增量。

http://jsfiddle.net/vu9bp/2/

【讨论】：