public
Last active

requestAnimationFrame, browser prefix detection

  • Download Gist
raf.js
JavaScript
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 = "equestAnimationFrame",
idx;
 
for ( var prop in window ) {
idx = prop.indexOf( raf );
 
if ( idx > -1 ) {
return prop.slice( 0, idx - 1 );
}
}
 
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");

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.