Retrieving requestAnimationFrame with JavaScript

Discussion

1. MaxArt

   According to caniuse, Microsoft’s browsers never had a vendor prefixed version of requestAnimationFrame, so we can just keep moz and webkit.

   That’s a very common way to normalize the function, but in most recent implementations requestAnimationFrame passes an argument to the callback function, which is the amount of milliseconds since performance.timing.navigationStart, with micro precision too. This can be very handy for the callback.

   It’s not really possible to perfectly emulate this, but you can get something close if you take note of the epoch time as soon as the script is executed. So this is how I used to polyfill requestAnimationFrame:

   (function(start) {
       window.requestAnimationFrame = function(callback) {
           return setInterval(function() {
               callback(new Date().getTime() - start);
           }, 1000 / 60);
       };
   })(new Date().getTime());
   

   (Well, not exactly… since most of the times requestAnimationFrame is called again in the callback function, but the function itself takes some milliseconds at least to be executed – because it probably involves some kind of repaint – and you should adjust the time interval accordingly, or you may never hope to even get close to 60 fps.)

   Also, don’t forget to normalize cancelAnimationFrame, which has a nasty variant in some (and maybe forgotten?) WebKit browsers: webkitCancelRequestAnimationFrame.