requestanimationframe

How to use requestAnimationFrame?

Warning! This question is not about the best way to shim requestAnimFrame. If you are looking for that, move on to any other answer on this page. You got tricked by automatic semicolon insertion. Try this: window.requestAnimFrame = function(){ return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback){ … Read more

requestAnimationFrame garbage collection

I have found out the following: If you change your RAF function into two “ping-pong” like functions, you get alot less garbage. You can’t avoid the first initial “big GC”, but after that you see only minor GCs of about 50kb instead of 700kb-1mb GCs. The code will look like this: <script type=”text/javascript” charset=”utf-8″> window.frameA … Read more

Exact time of display: requestAnimationFrame usage and timeline

What you are experiencing is a Chrome bug (and even two). Basically, when the pool of requestAnimationFrame callbacks is empty, they’ll call it directly at the end of the current event loop, without waiting for the actual painting frame as the specs require. To workaround this bug, you can keep an ever-going requestAnimationFrame loop, but … Read more

Controlling fps with requestAnimationFrame?

How to throttle requestAnimationFrame to a specific frame rate Demo throttling at 5 FPS: http://jsfiddle.net/m1erickson/CtsY3/ This method works by testing the elapsed time since executing the last frame loop. Your drawing code executes only when your specified FPS interval has elapsed. The first part of the code sets some variables used to calculate elapsed time. … Read more