Question

As I understand it, usage of the JS requestAnimationFrame API is intended for cases where the framerate isn’t in need of being controlled, but I have a use case where it’s essential that a <canvas> only updates at a certain fps interval that may be anywhere between 1 and 25 (between 1 and 25 frames per second, that is). Can I then somehow still effectively use rAF to get at the optimizations it offers?

This question has similarities to mine, but the accepted answer there made close to zero sense to me in the context of that question.

I have two possible solutions for this. The first one involves using a while loop to halt the execution of the script for a specified delay before calling requestAnimationFrame from within the callback. In the example where I saw this, it effectively limited the fps of the animation, but it also seemed to slow down the entire tab. Is this still actually a good solution? The second alternative, as mentioned in the question I linked to above, calls requestAnimationFrame within a setInterval. To me that seems a bit convoluted, but it could be that’s the best option?

Or is there a better alternative to accomplish this?

Answer 1

Yoshi’s answer is probably the best code solution to this problem. But still I’ll mark this answer as correct, because after some research I basically found that my question was invalid. requestAnimationFrame is really meant to keep frame rates as high as possible, and it optimizes for scenarios where animation is meant to be kept consistent and smooth.

Worth noting though is that you don’t need requestAnimationFrame to get optimization (even though rAF was touted as a great performance booster) since browsers still optimize regular drawing of a <canvas>. For example, when a tab isn’t focused, Chrome for one stops drawing its canvases.

So my conclusion was that this question was invalid. Hope this helps anyone who was wondering something similar to me.