Friday, May 16, 2014 - by

requestAnimationFrame() healthy alternative to setTimeout() & setInterval()

The requestAnimationFrame() method lets the browser know that the code wishes to perform an animation and requests that the browser calls the required animation function / method to update an animation only before the next repaint.

Why it is better?

  • Unlike setTimeout() / setInterval() the requestAnimationFrame() helps browsers to put the animations together into a single repaint during a redraw transition. 
  • Locks the visual updates to screen refresh rate.
  • If  the browser tab is inactive / invisible it does not runs and hence the browser does not keeps on calling the visual refresh optimizing memory, battery use on mobile devices.

Further Reading

https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

http://creativejs.com/resources/requestanimationframe/

http://css-tricks.com/using-requestanimationframe/ 

No Comments

Post Your Comments

Name (required)
Email Address (will not be published) (required)