I had two questions about window.requestAnimFrame in Javascript/HTML5

1. Is there a difference between window.requestAnimFrame and window.requestAnimationFrame?

2. Is window.requestAnimFrame/AnimationFrame similar to the document.onload = or img.onload = functions

Sorry I may be a bit unclear but if you understand would you be able to explain? Thanks :D

I had two questions about window.requestAnimFrame in Javascript/HTML5

1. Is there a difference between window.requestAnimFrame and window.requestAnimationFrame?

2. Is window.requestAnimFrame/AnimationFrame similar to the document.onload = or img.onload = functions

Sorry I may be a bit unclear but if you understand would you be able to explain? Thanks :D

• javascript
• html
• canvas

• 3 Pretty sure requestAnimFrame() is just a polyfill created for the official requestAnimationFrame() - as for it's similarity to other functions, it's closer to setInterval - Google is your friend – MDEV Commented Sep 27, 2013 at 14:27
• Thanks :D Sorry for the second question but what is a polyfill? – Jelani Thompson Commented Sep 27, 2013 at 14:32
• A polyfill (or shim) is a replacement to a standard function, to be used by browsers that do not support the standard. – bfavaretto Commented Sep 27, 2013 at 14:42
• 1 As @SmokeyPHP says, there's much on requestAnimationFrame(RAF) on Google. Here's a brief post by Paul Irish (the creator of the requestAnimFrame): paulirish./2011/requestanimationframe-for-smart-animating And here's a classic link on why using RAF is better than the old setInterval: creativejs./resources/requestanimationframe Your second question: Not really similar except that RAF will delay execution of your animation if the cpu is really busy--just like onload will delay execution until the DOM is renderable. – markE Commented Sep 27, 2013 at 14:53
• @markE : "RAF will delay execution of your animation if the cpu is really busy" : no : rAF will wait for the next vertical synchronisation (VSYNC) of the screen to execute the code. So basically, rAF is about the screen being ready when onload is about the document being ready. – GameAlchemist Commented Sep 27, 2013 at 20:04

2 Answers 2

Is there a difference between window.requestAnimFrame and window.requestAnimationFrame ?

Yes, requestAnimFrame is a custom non-official property added to the window object while requestAnimationFrame is part of the official standard for HTML5 canvas provided by the W3C in their WindowAnimation section of "Timing control for script-based animation".

However, they do the same thing. Paul Irish either got a lazy moment (in which case he should have called it rAF IMO :-) ) - or - he didn't want to run into the risk of the method being protected internally in the browser at the time he wrote it (Erik Möller of Opera wrote his own version of this polyfill which uses the full name).

A polyfill, or shim, or shiv , or monkey-patch, or duck-punching, or shaking the bag (! who es up with these names??) simply tries, in this case anyways, to unify functionality in various browsers.

For example, when requestAnimationFrame was being implemented with experimental status the method was prefixed in the various browsers, ie. mozRequestAnimationFrame for Firefox/Aurora, webkitRequestAnimationFrame for WebKit browsers such as Chrome and Safari, oRequestAnimationFrame for Opera and so on.

So instead of testing for this each time you need to call the method a polyfill sort of merges these, or pick the available one, into a single mon named call as well as making sure future non-prefixed implementations works as well.

The means you can use the name the polyfill goes under without worrying about future changes as it will work when the official named method is available in the browser.

(And good news in that regard: Chrome and Firefox has now shipped this method unprefixed, other browsers will probably follow suit).

Is window.requestAnimFrame/AnimationFrame similar to the document.onload = or img.onload = functions ?

Not really. This is a short-hand way of doing:

document.onload = function;
img.onload = function;

while the polyfill would be equivalent to doing:

var myVar = var1 || var2 || var3;

(|| = OR in JavaScript) where myVar would bee the first defined value provided only one was set (note that this is a very simplified way of saying it as there is more to it than just this depending what those variables are).

So the window.requestAnimFrame (or window.requestAnimationFrame) will simply "ask" to set the first available defined method to it where non-prefixed is prioritized:

window.requestAnimationFrame = window.requestAnimationFrame;

will just set itself it exist, but if it doesn't we need to give alternative values:

window.requestAnimationFrame = window.requestAnimationFrame ||
                               Window.mozRequestAnimationFrame ...

so if window.requestAnimationFrame did not exist it will try with moz prefix and so on. The result of this OR'ing will set window.mozRequestAnimationFrame if available to window.requestAnimationFrame and so forth for the other prefixed options.

If non exist then the last resort, the setTimeout fallback will be set instead. This works in this case as they are signature patible (takes function to call as an argument).

The result being you can call window.requestAnimationFrame (or in case of Pauls polyfill window.requestAnimFrame) and it will work in any browser no matter if they support the method prefixed or not, or not at all.

(I now definitely suspect Paul as I got tired of typing requestAnimationFrame all the time.. :-| )

1. You should forget window.requestAnimFrame altogether. Just mind about window.requestAnimationFrame.
   Not all browsers do implement it natively, but rather as an experimental feature : in that case they put a prefix before the method's name : mozRequestAnimationFrame for FF, webkitRequestAnimationFrame for Chrome/Safari, and so on.
   A polyfill is a method that will normalize those naming to have simple access to the rAF without minding wether the browser considers it as experimental or not.
   This might seem a loss of time, but as of now, all rAF versions do not behave the same : Chrome's rAF will callback the function with a sub-millisecond (microsecond precision) timestamp when firefox will use a millisecond timestamp, for instance.

The polyfill i use in my canvas library is this one :

// requestAnimationFrame polyfill
(function() {
var  w=window,    foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                               w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                               w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                                        function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;
}());

2) onload and rAF are very different : as i stated in the ments, rAF will wait for the next vertical synchronisation (VSYNC) of the screen to execute the (draw) code. So basically, rAF is about the screen being ready when onload is about the document being ready.