Jerome Etienne.js Blog

Around JavaScript, node.js, WebGL and cool HTML5 game stuff

cancelRequestAnimationFrame() for Paul Irish requestAnimationFrame()

Paul Irish recently wrote requestAnimationFrame for smart animating. It is a polyfill so people can start use requestAnimationFrame() today and still be future proof.

This post is about its counterpart, cancelRequestAnimFrame(). It cancels a requestAnimationFrame(), like clearTimeout cancels a setTimeout.

Step 1: how to get the code

First include the cancelRequestAnimFrame() code in your page.

1
2
3
4
5
6
7
8

window.cancelRequestAnimFrame = ( function() {

    return window.cancelAnimationFrame          ||

        window.webkitCancelRequestAnimationFrame    ||

        window.mozCancelRequestAnimationFrame       ||

        window.oCancelRequestAnimationFrame     ||

        window.msCancelRequestAnimationFrame        ||

        clearTimeout

} )();

Add requestAnimFrame() too. It is a slightly modified version of paul’s to return setTimeout() handle.

1
2
3
4
5
6
7
8
9
10

window.requestAnimFrame = (function(){

    return  window.requestAnimationFrame       ||

        window.webkitRequestAnimationFrame ||

        window.mozRequestAnimationFrame    ||

        window.oRequestAnimationFrame      ||

        window.msRequestAnimationFrame     ||

        function(/* function */ callback, /* DOMElement */ element){

            return window.setTimeout(callback, 1000 / 60);

        };

})();

Step 2: how to use it

Here is a possible way to use it. Show, dont tell, here is a live demo on jsfiddle

1
2
3
4
5
6
7
8
9
10
11
12
13

// to store the request

var request;



// start and run the animloop

(function animloop(){

  render();

  request = requestAnimFrame(animloop, element);

})();



// cancelRequestAnimFrame to stop the loop in 1 second

setTimeout(function(){

    cancelRequestAnimFrame(request);

}, 1*1000)

About requestAnimationFrame

In the past months, much has been done for web graphics. Among them, requestAnimationFrame() is used to make smoother animation while not wasting useless rescources when not visible. The spec is making good progress, and several implementations are already deployed.

Comments