Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

requestAnimationFrame, browser prefix detection

View raf.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
var rAF = "equestAnimationFrame";
 
window["r"+rAF] = window["r"+rAF] ||
window["webkitR"+rAF] ||
window["mozR"+rAF] ||
window["msR"+rAF] ||
window["oR"+rAF];
 
 
// A list
[ "r", "webkitR", "mozR", "msR", "oR", "" ].join( rAF + "," ).split( "," )
 
 
// Best one yet:
[ "r", "webkitR", "mozR", "msR", "oR" ].reduce(function( p, v ) {
return window[ v + p ] || p;
}, "equestAnimationFrame");
 
 
// Just the prefix
var prefix = [ "r", "webkitR", "mozR", "msR", "oR" ].reduce(function( p, v ) {
return (window[ v + p ] && v.slice(0, -1)) || p;
}, "equestAnimationFrame");
 
 
// Polyfills...
// requestAnimationFrame (from requestAnimationFrame)
// cancelAnimationFrame (from cancelAnimationFrame or cancelRequestAnimationFrame)
(function(window) {
var time, can, raf, pfx;
 
time = 0;
can = "Cancel";
raf = "RequestAnimationFrame";
pfx = ["r", "webkitR", "mozR", "msR", "oR"].reduce(function(p, v) {
return (window[v + p] && v.slice(0, -1)) || p;
}, raf.slice(1));
 
window.requestAnimationFrame = window[pfx + raf] || function(callback, element) {
var now, callAt;
now = +new Date();
callAt = Math.max(0, 16 - (now - time));
time = now + callAt;
return setTimeout(function() {
callback(time);
}, callAt);
};
 
window.cancelAnimationFrame = window[pfx + can + raf] ||
window[pfx + raf.replace(raf.slice(0, 7), can)] || function(id) {
clearTimeout(id);
};
}(this));
 
 
 
["r","webkitR","mozR","msR","oR"].reduce(function(p, v) { return window[v + p] || p; }, "equestAnimationFrame");
 
 
 
 
// Alternate approach ideas
 
var suffix = "equestAnimationFrame",
rAF = [ "r", "webkitR", "mozR", "msR", "oR" ].filter(function( val ) {
return val + suffix in window;
})[ 0 ] + suffix;
/*
var suffix="equestAnimationFrame",rAF=["r","webkitR","mozR","msR","oR"].filter(function(a){return a+suffix in window})[0]+suffix;
Original Size: 179 bytes (164 bytes gzipped)
Compiled Size: 129 bytes (131 bytes gzipped)
Saved 27.93% off the original size (20.12% off the gzipped size)
*/
 
 
var prefix = function(window) {
var raf = "RequestAnimationFrame",
idx;
 
for (var prop in window) {
idx = prop.indexOf(raf);
 
if (idx > -1) {
return prop.slice(0, idx);
}
}
 
return null;
}(this);
 
/*
var prefix=function(c){var a,b;for(b in c)if(a=b.indexOf("equestAnimationFrame"),a>-1)return b.slice(0,a-1);return null}(this);
Original Size: 232 bytes (184 bytes gzipped)
Compiled Size: 127 bytes (130 bytes gzipped)
Saved 45.26% off the original size (29.35% off the gzipped size)
*/
 
console.log(
prefix
);

"Best " + ["s","webkitS","mozS","msS","oS"].reduce(function(p, v) { return window[v + p] || p; }, "him yet");

["r","webkitR","mozR","msR","oR"].reduce(function(p, v) { return window[v + p] || p; }, "equestAnimationFrame");

This trick is awesome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.