Skip to content

Instantly share code, notes, and snippets.

@jonasfj jonasfj/rAF.js forked from paulirish/rAF.js
Last active Dec 10, 2015

Embed
What would you like to do?
A list-based fallback implementation of `requestAnimationFrame` that reduces the number of `setTimeout`s needed.
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
// list-based fallback implementation by Jonas Finnemann Jensen
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
var tid = null, cbs = [], nb = 0, ts = 0;
function animate() {
var i, clist = cbs, len = cbs.length;
tid = null;
ts = Date.now();
cbs = [];
nb += clist.length;
for (i = 0; i < len; i++){
if(clist[i])
clist[i](ts);
}
}
window.requestAnimationFrame = function(cb) {
if (tid == null)
tid = window.setTimeout(animate, Math.max(0, 20 + ts - Date.now()));
return cbs.push(cb) + nb;
};
window.cancelAnimationFrame = function(id) {
delete cbs[id - nb - 1];
};
}
}());
@jonasfj

This comment has been minimized.

Copy link
Owner Author

jonasfj commented Jan 3, 2013

Now a little cleaner than previous revisions, and closer to the specification.

Compared to the original approach, we don't create a new closure for each frame, but just a list and a single timeout.

@natb19

This comment has been minimized.

Copy link

natb19 commented Feb 3, 2013

Hey, interesting idea.

I'm not too good on scoping concepts, but would there be a problem leaving the cbs list in the global scope?

@jonasfj

This comment has been minimized.

Copy link
Owner Author

jonasfj commented Sep 21, 2013

@natb19,
There is only one instance of the cbs variable... so technically it could live in the global scope.
But I would do it because data encapsulation is a good idea :)

@kof

This comment has been minimized.

Copy link

kof commented Sep 22, 2013

https://github.com/kof/animationFrame

a bit optimized version of your shim + some features and ios fix.

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.