requestAnimationFrame 检测停止答案

【问题标题】：requestAnimationFrame detect stoprequestAnimationFrame 检测停止
【发布时间】：2012-10-30 05:54:32
【问题描述】：

我注意到，每当我停靠浏览器窗口或切换选项卡时，requestAnimationFrame 都会停止被调用（我预计会发生这种情况）。

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

原因是，我的游戏中有一个计时器。我想在 requestAnimationFrame 不再呈现时停止计时器。

我已经查看了“window.blur”和“window.focus”事件，但它们与 requestAnimationFrame 何时停止和启动无关（例如，当您在浏览器窗口外单击时，会触发 window.blur 事件但 requestAnimationFrame 一直在运行）。

我想订阅 requestAnimationFrame 何时开始和停止。你知道方法吗？

【问题讨论】：

标签： javascript requestanimationframe

【解决方案1】：

如果您知道在正常情况下requestAnimationFrame 会以至少 4 Hz 的频率触发，您可以设置一个计时器，例如 3 Hz，如果计时器滴答之间没有 requestAnimationFrame 滴答， requestAnimationFrame 计时器已停止。

【讨论】：

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

【解决方案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);
});

需要更多信息？随便问问。

【讨论】：

我非常接近基于 rAF 的计时器。检查这个小提琴：jsfiddle.net/christian1974/Arjje/1计时器运行良好，当我切换标签时它实际上停止了，但是当我回到标签时，从空闲状态/当 rAF 未运行时的所有时间现在突然累积到总时间。你明白为什么吗？？