public
paulirish / gist:839879
Last active

requestAnimFrame() shim.

  • Download Gist
gistfile1.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 
// shim layer with setTimeout fallback
 
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(callback, element){
                window.setTimeout(function(){
                    callback(+new Date);
                }, 1000 / 60);
              };
    })();
paulirish commented

claritysource left this comment but deleted it....

If I'm not mistaken, the original code has the following bugs:

  1. (window.webkitRequestAnimationFrame && !timeundefined) evaluates to a Boolean, not a function.

  2. Line 16 will likely be called before line 11, upon which it depends.

  3. In the fallback case, the callback will not be called at 60 frames per second, because the time the callback takes is not factored into the interval. Also, from what I understand, browsers are free to pad setTimeout() with an arbitrary amount of time, making the interval even more error-prone.

paulirish commented

I've since updated this gist to remove the timeundefined issue as it was specific to Chrome 10 which is now dead and gone. hooray for software updates!

paulirish commented

Don't use this

use this:

https://gist.github.com/1579671

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.