What is the best way to call the requestAnimationFrame() method?

Question

I’ve seen in several examples on the web mainly on MDN using the following syntax to call the method requestAnimationFrame():

function minhaFuncao() {
    requestAnimationFrame(minhaFuncao);
}

minhaFuncao();

Wouldn’t that way be technically wrong? for the sense of using the method requestAnimationFrame() is to execute a code before the browser renders the page again and when the similiar snippet code from above is used the function minhaFuncao() it will be executed by the time it is called using the following syntax:

function minhaFuncao() {
    requestAnimationFrame(minhaFuncao);
}

requestAnimationFrame(minhaFuncao);

It will run when the browser is ready to run (at least that’s what I understood about both :)) which of the above syntaxes I should use in my code?

Answer 1

If the minhaFuncao starts the animation, in the second example, the animation will only start after the page update, not immediately, as in the first example

The first view may seem indifferent, and in most cases it is, but it makes a difference, the tab blur (minimize the browser or change tab) will cause the page not to be updated, run the code below, exit the tab and after a while go back:

let i = 0;

function minhaFuncao() {
    console.log(i++);
    requestAnimationFrame(minhaFuncao);
}

requestAnimationFrame(minhaFuncao);

The console will return at the same point that came out and not a few dozen ahead, so if, before requestAnimationFrame(minhaFuncao) be called the user change tab? The animation will only begin to occur when it comes back, which may or may not be advantageous, you may want, even if the user does not have the page focused, to run for the first time, since the first time the animation occurs, also defined some important values or initiated some asynchronous process

So, there’s a difference, you’ve noticed, but in general both will work almost the same

A use case where this difference is important is a real-time chat, where you only update with new messages when the user is open, but the first time you load the page, even if the user is not in the chat tab, already must load the previous messages, not to accumulate all the update after

Answer 2

Both forms are correct, the intention to use the requestAnimationFrame is to prevent frame losses (Jank), by scheduling the execution of a code for the start of the next frame.

The idea behind this recursion:

function animationLoop() {
  ... ex. rotacionar, mover, limpar, checar colisões..
  requestAnimationFrame(animationLoop);
}

animationLoop()

It makes a lot of sense for animations cases where in fact you want to optimize the execution (max 60fps ~ 16.7ms per frame) and control the objects, this will be running in loop unless you interrupt the execution with some Return within the animationLoop.

Even calling directly as below, the Function animationLoop it will still be scheduled and run at the beginning of the next frame.

requestAnimationFrame(animationLoop);