Retrieving requestAnimationFrame with JavaScript
The requestAnimationFrame function has been a major boost to developers creating and managing animations with JavaScript. Paul Irish has an excellent introduction on requestAnimationFrame -- I highly recommend you read it. This HTML5Hub post is also very good. Most browsers now support the animation function but in the case a browser doesn't, you can shim a rough equivalent with setInterval:
var requestAnimationFrame = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { return setTimeout(callback, 1000 / 60); };
requestAnimationFrame was implemented with browser prefixes so we'll check for those if the unprefixed window method isn't there. If no native implementation exists, a setInterval shim will have to do!
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![Spatial Navigation]()
Spatial navigation is the ability to navigate to focusable elements based on their position in a given space. Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote. Firefox OS TV apps are simply...
![MooTools Accordion: Mouseover Style]()
Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...
According to caniuse, Microsoft’s browsers never had a vendor prefixed version of
requestAnimationFrame, so we can just keepmozandwebkit.That’s a very common way to normalize the function, but in most recent implementations
requestAnimationFramepasses an argument to the callback function, which is the amount of milliseconds sinceperformance.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
requestAnimationFrameis 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.