requestAnimationFrame检测停止

Question

我注意到每当我停靠浏览器窗口或切换标签时，requestAnimationFrame的调用就会停止（这是我预期的结果）。

有没有办法检测到这种停止发生的时间？

原因是我在我的游戏中运行一个定时器。 当requestAnimationFrame不再渲染时，我想停止计时器。

我已经研究了“window.blur”和“window.focus”事件，但这些事件与requestAnimationFrame的启动和停止无关（例如，当你在浏览器窗口外单击时触发一个window.blur事件，但requestAnimationFrame仍在运行）。

我希望能订阅requestAnimationFrame的启动和停止。 你知道吗？

- ChrisRich

Answer 1

如果您知道在正常情况下requestAnimationFrame每秒会触发至少4次，您可以设置一个3Hz的定时器，如果在定时器的间隔中没有requestAnimationFrame的触发，那么requestAnimationFrame计时器就停止了。

- icktoofay

---

是的。这证明了检测rAF停止/开始的唯一方法。基本上，我计算每次渲染之间的毫秒数。如果该数字超过160（相当于6.25 fps），那么我们可以安全地假设用户已经在浏览器中切换了选项卡或者将窗口停靠在了屏幕边缘。 - ChrisRich

Answer 2

试试这个：

var timer;

if (!window.requestAnimationFrame) {
   window.requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
}

requestAnimationFrame(function again() {
 if (timer === "paused") {
  return;
 }

 clearTimeout(timer);

 timer = setTimeout(function () {
  timer = "paused";
  console.log("got ya, you closed the window");

  requestAnimationFrame(function () {
   timer = null;
   console.log("got ya, you re-opened the window");
    requestAnimationFrame(again);
  });
 }, 1e3);

 // rest of code goes here

 requestAnimationFrame(again);
});

需要更多信息吗？只需问就可以了。

- Roderick Obrist

---

我已经接近基于rAF的计时器了。请查看此fiddle：http://jsfiddle.net/christian1974/Arjje/1/ 计时器运行良好，当我切换选项卡时它实际上会停止，但是当我回到选项卡时，从空闲状态/ rAF未运行时的所有时间现在突然累积到总时间中。你能看出为什么吗？ - ChrisRich