window.requestAnimFrame Clarification

Question

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

Answer 1

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 comes 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 common 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 become 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 compatible (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.. :-| )