JavaScript: Request Animation Frame Polyfill

gistfile1.txt

(function(){
	'use strict';
	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] + 'RequestCancelAnimationFrame'];
	}

	if(!window.requestAnimationFrame){
		window.requestAnimationFrame = function(callback, element){
			var currTime = new Date().getTime(),
				timeToCall = Math.max(0, 16 - (currTime - lastTime)),
				id = window.setTimeout(
					function(){
						callback(currTime + timeToCall);
					}, 
					timeToCall
				);
			
			lastTime = currTime + timeToCall;
			
			return id;
		};
	}
	if(!window.cancelAnimationFrame){
		window.cancelAnimationFrame = function(id){
			clearTimeout(id);
		};
	}
}());



/* Example Usage

	function render(){
		console.log("rendering!"); // replace this with your render code
	}

	(function animLoop(){
	    window.requestAnimationFrame(animLoop);
	    render();
	}());

*/