CODEWITHSUNDEEP
javascriptrequestanimationframe
ChrisRich
ChrisRich

Reputation: 8716

requestAnimationFrame detect stop

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?

Upvotes: 8

Views: 3284

Answers (2)

Roderick Obrist
Roderick Obrist

Reputation: 3828

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.

Upvotes: 1

icktoofay
icktoofay

Reputation: 128991

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.

Upvotes: 4

Related Questions