Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Drop in replacements for setTimeout()/setInterval() that makes use of requestAnimationFrame() where possible for better performance
Drop in replace functions for setTimeout() & setInterval() that
make use of requestAnimationFrame() for performance where available
http://www.joelambert.co.uk
Copyright 2011, Joe Lambert.
Free to use under the MIT license.
http://www.opensource.org/licenses/mit-license.php
// requestAnimationFrame() shim by Paul Irish
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
/**
* Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
* @param {function} fn The callback function
* @param {int} delay The delay in milliseconds
*/
window.requestInterval = function(fn, delay) {
if( !window.requestAnimationFrame &&
!window.webkitRequestAnimationFrame &&
!(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
!window.oRequestAnimationFrame &&
!window.msRequestAnimationFrame)
return window.setInterval(fn, delay);
var start = new Date().getTime(),
handle = new Object();
function loop() {
var current = new Date().getTime(),
delta = current - start;
if(delta >= delay) {
fn.call();
start = new Date().getTime();
}
handle.value = requestAnimFrame(loop);
};
handle.value = requestAnimFrame(loop);
return handle;
}
/**
* Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
* @param {int|object} fn The callback function
*/
window.clearRequestInterval = function(handle) {
window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
clearInterval(handle);
};
/**
* Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
* @param {function} fn The callback function
* @param {int} delay The delay in milliseconds
*/
window.requestTimeout = function(fn, delay) {
if( !window.requestAnimationFrame &&
!window.webkitRequestAnimationFrame &&
!(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
!window.oRequestAnimationFrame &&
!window.msRequestAnimationFrame)
return window.setTimeout(fn, delay);
var start = new Date().getTime(),
handle = new Object();
function loop(){
var current = new Date().getTime(),
delta = current - start;
delta >= delay ? fn.call() : handle.value = requestAnimFrame(loop);
};
handle.value = requestAnimFrame(loop);
return handle;
};
/**
* Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
* @param {int|object} fn The callback function
*/
window.clearRequestTimeout = function(handle) {
window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
clearTimeout(handle);
};

are these shims also designed to work without Paul's window.requestAnimFrame? otherwise i see no point in duplicating the checks that paul already does in his. simply do if (!window.requestAnimFrame) return window.setInterval(fn, delay); at the start.

Owner

The shims require Pauls requestAnimFrame() to call the correct vendor prefixed function which is why his code is also bundled. Also, Firefox 5 ships with "broken" support by only providing mozRequestAnimationFrame and not mozCancelRequestAnimationFrame. The checks are important to work around this until this is fixed by Mozilla.

timc3 commented Apr 30, 2012

Are these still working correctly with the changes to the API? I am basically doing something like this: and get mycallback never gets called.

var timer = window.requestInterval(mycallback, 60);

Glidias commented Nov 1, 2012

Take note that this code will use a global "handle" variable. So, make sure you aren't using it in global namespace, or have to replace it with another name.

For window.requestInterval's loop() function, there is a mistake, which would cause clearRequestInterval() to not work (ie. loop will continue to run indefinitely) if canceling the frame happens to be done within the fn.call() invocation.

It might be better if fn.call() occurs after requestAnimFrame(), not before it. This would allow situations within fn.call() to cancel the latest requested animation frame id (which should be the next frame), and not end up canceling an outdated animation frame id (which is the current frame being executed).

Here it is edited function:
function loop() {
handle.value = requestAnimFrame(loop); // replace this in first line instead! request next frame.
var current = new Date().getTime(),
delta = current - start;

    if(delta >= delay) {
        fn.call();
        start = new Date().getTime();
    }

};
gmyx commented May 23, 2013

@Glidias I've implemented your suggesting in my fork.

I've also changed requestTimeout to allow passing an argument with the function call.

webcss commented Jan 17, 2014

In order for the requestAnimFrame shim to work in IE9 (and below), the setTimeout fallback should return its handle:

function(/* function / callback, / DOMElement */ element){
return window.setTimeout(callback, 1000 / 60);
};

MikeLP commented Nov 10, 2014

Please help. Why this case not working?

var time = 1;
var r = requestInterval(function() {
console.log('tick', time, time == 15, r)
if(time == 15) {
clearRequestInterval(r);
}
time++

}, 1000)

But if you type in console clearRequestInterval(r); - this work?

kopax commented Mar 16, 2016

Is this still usefull in 2016 ? I guess not

@kopax why not?

englishextra commented May 16, 2016 edited

@kopax & @misbeliever why it wont, and why it will, I wonder.

webvitalii commented Jun 14, 2016 edited

I guess code can be simplified by removing the preffixed code based on the current stats:

http://caniuse.com/#feat=requestanimationframe

englishextra commented Dec 21, 2016 edited

I ended up with removing vendors and not exposing requestAnimFrame to window:

/*!
 * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
 * modified gist.github.com/joelambert/1002116
 * the fallback function requestAnimFrame is incorporated
 * gist.github.com/joelambert/1002116
 * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
 * jsfiddle.net/englishextra/sxrzktkz/
 * @param {Object} fn The callback function
 * @param {Int} delay The delay in milliseconds
 * requestInterval(fn, delay);
 */
var requestInterval = function (fn, delay) {
	var requestAnimFrame = (function () {
		return window.requestAnimationFrame || function (callback, element) {
			window.setTimeout(callback, 1000 / 60);
		};
	})(),
	start = new Date().getTime(),
	handle = {};
	function loop() {
		handle.value = requestAnimFrame(loop);
		var current = new Date().getTime(),
		delta = current - start;
		if (delta >= delay) {
			fn.call();
			start = new Date().getTime();
		}
	}
	handle.value = requestAnimFrame(loop);
	return handle;
};
/*!
 * Behaves the same as clearInterval except uses cancelRequestAnimationFrame()
 * where possible for better performance
 * gist.github.com/joelambert/1002116
 * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
 * jsfiddle.net/englishextra/sxrzktkz/
 * @param {Int|Object} handle function handle, or function
 * clearRequestInterval(handle);
 */
var clearRequestInterval = function (handle) {
	if (window.cancelAnimationFrame) {
		window.cancelAnimationFrame(handle.value);
	} else {
		window.clearInterval(handle);
	}
};
/*!
 * Behaves the same as setTimeout except uses requestAnimationFrame()
 * where possible for better performance
 * modified gist.github.com/joelambert/1002116
 * the fallback function requestAnimFrame is incorporated
 * gist.github.com/joelambert/1002116
 * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
 * jsfiddle.net/englishextra/dnyomc4j/
 * @param {Object} fn The callback function
 * @param {Int} delay The delay in milliseconds
 * requestTimeout(fn,delay);
 */
var requestTimeout = function (fn, delay) {
	var requestAnimFrame = (function () {
		return window.requestAnimationFrame || function (callback, element) {
			window.setTimeout(callback, 1000 / 60);
		};
	})(),
	start = new Date().getTime(),
	handle = {};
	function loop() {
		var current = new Date().getTime(),
		delta = current - start;
		if (delta >= delay) {
			fn.call();
		} else {
			handle.value = requestAnimFrame(loop);
		}
	}
	handle.value = requestAnimFrame(loop);
	return handle;
};
/*!
 * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame()
 * where possible for better performance
 * gist.github.com/joelambert/1002116
 * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
 * jsfiddle.net/englishextra/dnyomc4j/
 * @param {Int|Object} handle The callback function
 * clearRequestTimeout(handle);
 */
var clearRequestTimeout = function (handle) {
	if (window.cancelAnimationFrame) {
		window.cancelAnimationFrame(handle.value);
	} else {
		window.clearTimeout(handle);
	}

};

https://jsfiddle.net/englishextra/sxrzktkz/
https://jsfiddle.net/englishextra/dnyomc4j/

BTW

in clear... and cancel... jsdoc shouldn't that be:

@param {int|object} handle The callback function

instead of:

@param {int|object} fn The callback function

@Glidias Very nice edit in requestInterval

hinell commented Dec 23, 2016 edited

Can somebody create an npm package for it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment