Search code examples
javascriptrequestanimationframecancelanimationframe

JS cancelAnimationFrame syntax

This may be really easy question but i just started playing with request animation frame and i need some guidance. I found on the internet that the safest (in terms of browser compatibility) syntax for request animation frame is this code:

    window.requestAnimFrame = (function() {
        return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame    || 
                window.oRequestAnimationFrame      || 
                window.msRequestAnimationFrame     || 
                function(callback, element) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

and then call it like this: requestAnimFrame( protect );

the question is how to build cancel animation frame syntax to perfectly align with the above one. ( should cancel all above prefix starters and set timeout in case of fallback).

Thank you for the answers ;)

---EDIT---

I just found this article >click me<

Solution presented in the article only includes vendors webkit and moz as they claim that 2013.03.06: No more [ms] or [o] prefixes neccessary. Removed. I dont know now if the solution is complete and can be used today.

Solution

  • I love caniuse.com for these kind of things. Check out:

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

    You could click Show All and see all of the browser versions and what kind of requestAnimationFrame they support(prefixes included).

    But I think it's pretty safe just to use requestAnimationFrame and cancelAnimationFrame. Unless you really really really need to support browsers like IE9 or Safari 6 you don't need to shim this.