Why do you put requestAnimationFrame in front of the function body?

Question

As long as I wrote for the canvas, I always did the following:

function animate() { //do stuff in the animation requestAnimationFrame(animate); } 

Recently, I often saw how this is done as follows:

 function animate() { requestAnimationFrame(); //do stuff in the animation } 

While I can, of course, see the advantages for this, my way (basically, if there is an error in which he will not continue to call more frames), I could not find any advantages for calling the next frame.

Does anyone have an explanation for this / possible benefit for this? Or, can you prove that this should not be done this way? The source is definitely necessary, as I have seen it all over the Internet, but no one can really give a specific reason for this.

Answer 1

The placement of the rAF call becomes clearer if you remember that requestAnimationFrame just asks for a ride in the next animation processing loop - this does not actually cause the animation processing loop.

Calling the next rAF frame immediately gives you the best chance of catching the next cycle of the rAF cycle.

For example, if your “material” takes about 3 ms, and the next rAF cycle starts after 4 ms, you can catch the next cycle in 4 ms, and not the next cycle in 4 + 16 ms. It may not seem possible that you will skip the next rAF cycle, since you have 4-3 == 1 ms (almost an eternity for the processor), but the system can plan other things that eat up your 1 ms supply (for example, garbage collection) .

On the other hand, if your “stuff” averages 15 ms to complete, enter your rAF call at the end. Transferring the latter may skip execution once and for a while, but this is probably better than risking the accumulation of a few "things."

Given this, in general, enabling the rAF call at the end is safer for the random cost of the skipped rAF cycle.