Create a gist now

Instantly share code, notes, and snippets.

@rma4ok /rAF.js
Created Aug 16, 2012

requestAnimationFrame polyfill
// requestAnimationFrame polyfill by @rma4ok
!function (window) {
equestAnimationFrame = 'equestAnimationFrame',
requestAnimationFrame = 'r' + equestAnimationFrame,
ancelAnimationFrame = 'ancelAnimationFrame',
cancelAnimationFrame = 'c' + ancelAnimationFrame,
expectedTime = 0,
vendors = ['moz', 'ms', 'o', 'webkit'],
while (!window[requestAnimationFrame] && (vendor = vendors.pop())) {
window[requestAnimationFrame] = window[vendor + 'R' + equestAnimationFrame];
window[cancelAnimationFrame] =
window[vendor + 'C' + ancelAnimationFrame] ||
window[vendor + 'CancelR' + equestAnimationFrame];
if (!window[requestAnimationFrame]) {
window[requestAnimationFrame] = function (callback) {
currentTime = +new Date,
adjustedDelay = 16 - (currentTime - expectedTime),
delay = adjustedDelay > 0 ? adjustedDelay : 0;
expectedTime = currentTime + delay;
return setTimeout(function () {
}, delay);
window[cancelAnimationFrame] = clearTimeout;

Mind helping me understand the reason behind this?

  equestAnimationFrame = 'equestAnimationFrame',
  requestAnimationFrame = 'r' + equestAnimationFrame,

looks odd :)


@wamatt for better minification i would say...


and why use !function in the first line? :)


@ddon calling an anonymous function the bang converts it to an expression from a function declaration.


Mhh, since +new Date is slower than (new Date).getTime(). I would recommend to use the latter.

...and by the way, most modern browsers (i.e. IE9+) support so we can use it and fallback to getTime().


@yckart , how it helps in minification, it's just variable reuse only



Since 'requestAnimationFrame' starts with capital 'R' in vendor-prefixed funtion names like 'webkitRequestAnimationFrame' and it is used multiple times, it's better to use in that way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment