javascriptrequestanimationframe

Should I start a requestAnimationFrame loop with an initial call to requestAnimationFrame(callback)?

Here's my requestAnimationFrame() callback:

function callback(){
    render();
    requestAnimationFrame(callback);
}

When starting an animation loop with this callback, should I start the loop like this:

requestAnimationFrame(callback);

or by simply calling the callback:

callback();

I get the feeling that if I start it by just calling callback(), then the callback will actually run twice in that initial frame (resulting in a wasted call to render()), because it was called outside the requestAnimationFrame API. Is my assumption correct?

In other words, if I just call callback() by itself, then there's a chance it would execute at the beginning of a frame. And since callback() internally schedules itself to run again before the next frame using requestAnimationFrame(callback), then the callback would just run again in the same frame.

Solution

  • It may depend on when your initial call is made. If it's in a rendering frame (either in rAF callbacks, or ResizeObserver's) then calling it directly is best since otherwise you'd be one frame late, if it's before a rendering frame, then you won't see the result of that call on screen, indeed.

    It may also depend on what you do in that call, sometimes you may need the logic to start synchronously, even if it means running a render for free.

    But most of the time, wrapping the initial call in requestAnimationFrame is what one wants.