Using requestAnimationFrame and a target FPS

By on

Combining setInterval and requestAnimationFrame to get a target framerate

In the beginning...

People who've worked with Javascript animations before will probably know the next piece of code:
var targetFps = 25;
var loopInterval = window.setInterval(renderFrame, 1000 / targetFps);

What this does is create a loop that will run 25 times per second, which will hopefully give you your target framerate of 25 frames per second.

And They said: Do not use setInterval!

But then the powers that be thought of a new api: requestAnimatonFrame. It's basically a function that tells the browser it needs to execute something which will result in a redraw of a certain element.

We were told to set it up in a function like this:

function renderLoop(){
    // Put another iteration of renderLoop in the animation queue
    // Actually calculate and draw a frame

Yes, you're reading it correctly: it's basically a function calling itself. This will give you the best possible framerate. But what if we could combine those 2: setInterval and requestAnimationFrame?

The best of both worlds

function renderLoop(){

    var targetFps = 25;	
    // Combine setInterval and requestAnimationFrame in order to get a desired fps
    setInterval(function() {
    }, 1000 / targetFps);

And now you have a working requestAnimationFrame setup with a target fps!

So, what do you think?

A requestAnimationFrame polyfill

Warning: you will probably want to use a fallback function. Current fallback functions default to setInterval itself, which is not what we want.

Here's a very basic one you can use:

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

			// Since our requestAnimFrame is already in a loop in order to
			// control the preferred FPS, just call callback, not an interval


This is also a well known problem in the professional video industry when you want to playback a video at a different FPS then the device showing it refresh at. Many techniques has been used such as frame blending and complex re-timing re-building intermediate frames based on motion vectors, but with canvas these techniques are not available and the result will always be jerky video.



please visit giochi

Some really excellent information, Gladiolus I discovered this.

fashion victim

Excellent web site you have here.. It's difficult too find quality writimg like yours nowadays. I truly appreciate individuals like you! Take care!!


Why on earth should I do it? Leave him alone, he’s out of sorts today


Whatever the case I’ll always be subscribing to your entire supply and I hope you jot down ever again soon! I went to the show to kill time.

imitation youth jersey

Buut wanna remark that you have a very decent internet site, I like the layout it actually stands out.

Jelle De Loecker