I did some tests on Chrome and requestAnimationFrame
yielded 61 fps while setTimeOut( callback, 0 )
, yielded 233 fps.
If one would like to have more than 61 fps (which I'm not sure what for) but wouldn't it be better to render with setTimeOut and just use requestAnimationFrame to detect when the window lost focus and then stop the timeouts until the focus returns?
And a side question: is there another way to detect when the window loses focus other than requestAnimationFrame not calling the callback?
Another reason requestAnimationFrame is so useful is the fact that it gives you a time variable which you can use to calculate the amount of time between frames. This is not something that setInterval will do and since setInterval is not 100% accurate it is very possible your animation will get messed up over time.
Method 1: Update data via setInterval, and graphics via RAF. Keep those values in an object for each animated element. Assign the transform string to a variable in the object each setInterval 'frame'. Keep these objects in an array. Set your interval to your desired fps in ms: ms=(1000/fps).
Slowing down or cancelling requestAnimationFrame() If your animation requires a different frames per second (up to 60 fps) or simply doesn't require that high a level of refresh rate, you can slow it down by calling requestAnimationFrame inside setTimeout() .
Request animation frame is in sync with your monitors refresh rate (there is no use to animate more frames than you are actually showing on screen)
Here is a reference from the mozilla docs: https://developer.mozilla.org/en/DOM/Animations_using_MozBeforePaint
Frame rate control
MozBeforePaint won't fire more than a fixed number of times per second, e.g. 50 or 60. This is intentional, because modern operating systems and hardware won't let the browser display more frames than that anyway. Limiting the frame rate avoids wasting work, thereby saving CPU usage and power and improving overall system performance.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With