Run JavaScript code every second with rAF.js?

Question

I moved from using setTimeout to requestAnimationFrame as per the post at: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

How I can set some code inside my animation() loop to only execute every second?

I currently do something like:

animate() {
  if(playGame) {
    requestAnimFrame(animate);
  }

  var time = new Date().getTime();

  if(time % 1000 <= 10) {
    // code to run ~every second
  }

  // Also need to fix this, as it executes too fast, need to add score only 
  // every 100 milliseconds (player must stay in zone for 2 seconds to win)
  if(playerInZone()) {
    gameScore++;
    if(gameScore >= 100) {
      endGame();
    }
  } else {
    gameScore = 0;
  }

}

I'm not sure if calling the time like that and performing modulus is the right way? Also in what way would I change my gameScore code to only fire every (for example) 200 milliseconds?

NOTE:
I use this code at the top of my JavaScript file:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

But I've also included rAF.js in my file, however unsure which to use:

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

I noticed that you use Paul's "requestAnimFrame" (which he proposed while the spec was still in flux). Instead I would recommend using his true polyfill further down on the same page under the headline "A robust polyfill" — Strille, May 20 '13 at 07:08
I'd probably separate time sensitive game logic away from the render logic. — Dan Saltmer, May 20 '13 at 07:13
If you have included rAF.js you can just replace `requestAnimFrame` with `requestAnimationFrame` in your code. — Strille, May 20 '13 at 07:25
@zladuric it's really basic simple code that just changes the background effect based on where a user has put the sliders (but the code slowly degrades the value of the sliders every few seconds which is what I had to fix), it's not up anywhere publicly accessible though :( and the code is far from clean — dan2k3k4, May 20 '13 at 10:24
Possible duplicate of [Call a function each x second in requestAnimationFrame](http://stackoverflow.com/questions/29743592/call-a-function-each-x-second-in-requestanimationframe) — Damjan Pavlica, May 04 '17 at 22:42

Strille · Accepted Answer · 2013-05-20T09:16:07.837

3

When requestAnimationFrame is called the "current time" is sent in milliseconds, so you could do something like this:

var lastTime = 0;

animate(currentTime) {
  if (currentTime >= lastTime + 1000)  {
     // one second has passed, run some code here

     lastTime = currentTime;
  }


  if(playGame) {
    requestAnimationFrame(animate);
  }
}

edited May 20 '13 at 09:16

answered May 20 '13 at 07:05

Strille

5,741
2
26
40

Sorry, you need to call requestAnimationFrame again inside animate, I have edited my example. – Strille May 20 '13 at 07:28
Why would I need it multiple times? Should I just use it at the bottom of my script? – dan2k3k4 May 20 '13 at 07:33
calling `requestAnimationFrame` and sending in a function basically means: "Hello Browser. The **next** time you do a screen update, please run this code.". Notice it's "the next time" and not "every time". So, once the code has been run you need to call `requestAnimationFrame` if you want it to "loop". – Strille May 20 '13 at 07:38
Using just one call to `requestAnimtionFrame` seems to only run when I switch to another tab then switch back to the "game". Two calls to `requestAnimationFrame` seem to cause the tab to overload and crash? – dan2k3k4 May 20 '13 at 07:44
Yes, `requestAnimtionFrame ` only runs when the browser tab is visible. That is the whole point. For most games this is totally fine. However, if you always need to run a loop you need to use setInterval or setTimeout. – Strille May 20 '13 at 07:48
No what I mean is that `currentTime >= lastTime + 1000` is never true when the browser tab is visible. That line of code is only true if I switch to another tab then switch back. – dan2k3k4 May 20 '13 at 08:05
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30245/discussion-between-strille-and-dan2k3k4) – Strille May 20 '13 at 09:16

Run JavaScript code every second with rAF.js?

1 Answers1