Skip to content

Instantly share code, notes, and snippets.

@re1ro
Created August 16, 2012 16:02
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save re1ro/3371337 to your computer and use it in GitHub Desktop.
Save re1ro/3371337 to your computer and use it in GitHub Desktop.
requestAnimationFrame polyfill
// requestAnimationFrame polyfill by @rma4ok
!function (window) {
var
equestAnimationFrame = 'equestAnimationFrame',
requestAnimationFrame = 'r' + equestAnimationFrame,
ancelAnimationFrame = 'ancelAnimationFrame',
cancelAnimationFrame = 'c' + ancelAnimationFrame,
expectedTime = 0,
vendors = ['moz', 'ms', 'o', 'webkit'],
vendor;
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) {
var
currentTime = +new Date,
adjustedDelay = 16 - (currentTime - expectedTime),
delay = adjustedDelay > 0 ? adjustedDelay : 0;
expectedTime = currentTime + delay;
return setTimeout(function () {
callback(expectedTime);
}, delay);
};
window[cancelAnimationFrame] = clearTimeout;
}
}(this);
@wamatt
Copy link

wamatt commented Jan 15, 2013

Mind helping me understand the reason behind this?

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

looks odd :)

@yckart
Copy link

yckart commented Jan 18, 2013

@wamatt for better minification i would say...

@ddon
Copy link

ddon commented Feb 26, 2013

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

@Gerst20051
Copy link

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

@yckart
Copy link

yckart commented Apr 15, 2013

Mhh, since +new Date is slower than (new Date).getTime(). I would recommend to use the latter. http://jsperf.com/date-now-vs-date-gettime/6

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

@arindamnayak
Copy link

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

@beige90
Copy link

beige90 commented Nov 5, 2014

@arindamnayak

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