Skip to content

Instantly share code, notes, and snippets.

@rma4ok rma4ok/rAF.js
Created Aug 16, 2012

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

wamatt commented Jan 15, 2013

Mind helping me understand the reason behind this?

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

looks odd :)

@yckart

This comment has been minimized.

Copy link

yckart commented Jan 18, 2013

@wamatt for better minification i would say...

@ddon

This comment has been minimized.

Copy link

ddon commented Feb 26, 2013

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

@Gerst20051

This comment has been minimized.

Copy link

Gerst20051 commented Apr 1, 2013

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

@yckart

This comment has been minimized.

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

This comment has been minimized.

Copy link

arindamnayak commented Oct 2, 2014

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

@JinJunho

This comment has been minimized.

Copy link

JinJunho 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
You can’t perform that action at this time.