requestAnimationFrame detect stop

Question

I've noticed that whenever I dock the browser window or switch tabs requestAnimationFrame stops being called (which I expect to happen).

Is there a way to detect when this stop occurs?

Reason is, that I have a timer running in my game. I want to stop the timer when requestAnimationFrame is no longer rendering.

I've looked into the 'window.blur' and 'window.focus' events, but these are not related to when requestAnimationFrame stops and starts (eg when the you click outside the browser window a window.blur event is fired but requestAnimationFrame keeps running).

I want to subscribe to when requestAnimationFrame starts and stops. Do you know a way?

score 4 · Accepted Answer · answered Oct 30 '12 at 05:58

4

If you know that under normal circumstances requestAnimationFrame fires at, say, at least 4 Hz, you can set a timer for, say, 3 Hz, and if there has been no requestAnimationFrame tick between the timer ticks, the requestAnimationFrame timer has stopped.

answered Oct 30 '12 at 05:58

icktoofay

126,289
21
250
231

Yes. This turned out to be the only way of detecting when rAF stop / starts. Basically I'm computing the milliseconds between each render. If that number exceeds 160 (equivalent to 6.25 fps) then we can safely assume that the user has either switched tab in the browser or docked with window. – ChrisRich Oct 31 '12 at 09:42

Roderick Obrist · Answer 2 · 2012-10-30T06:04:28.127

1

try this:

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);
});

Need more info? just ask.

edited Oct 30 '12 at 06:04

answered Oct 30 '12 at 05:58

Roderick Obrist

3,688
1
16
17

I'm pretty close to a timer based on rAF. Check this fiddle: http://jsfiddle.net/christian1974/Arjje/1/ The timer runs fine and it actually stops when I'm switching tabs, but when I come back to the tab, all the time from the idle state / when rAF was not running is now suddenly accumulated to the total time. Can you see why?? – ChrisRich Oct 31 '12 at 01:27

requestAnimationFrame detect stop

2 Answers2