Create a gist now

Instantly share code, notes, and snippets.

@rma4ok /rAF.js
Created Aug 16, 2012

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.

Show comment Hide comment
@wamatt

wamatt Jan 15, 2013

Mind helping me understand the reason behind this?

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

looks odd :)

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.

Show comment Hide comment
@yckart

yckart Jan 18, 2013

@wamatt for better minification i would say...

yckart commented Jan 18, 2013

@wamatt for better minification i would say...

@ddon

This comment has been minimized.

Show comment Hide comment
@ddon

ddon Feb 26, 2013

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

ddon commented Feb 26, 2013

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

@Gerst20051

This comment has been minimized.

Show comment Hide comment
@Gerst20051

Gerst20051 Apr 1, 2013

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

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

@yckart

This comment has been minimized.

Show comment Hide comment
@yckart

yckart 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().

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.

Show comment Hide comment
@arindamnayak

arindamnayak Oct 2, 2014

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

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

@JinJunho

This comment has been minimized.

Show comment Hide comment
@JinJunho

JinJunho 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.

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