CODEWITHSUNDEEP
javascriptanimationrequestanimationframe
thelittlegumnut
thelittlegumnut

Reputation: 307

Is requestAnimationFrame implementation's recursive?

I'm currently experimenting with three.js, which relies on requestAnimationFrame to perform animations.

Wouldn't the following code result in infinite recursion before the cube rotations and renderer.render function are invoked?

function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera); 
}
render();

The code works, but I'm trying to improve my overall understanding of JavaScript.

The way I see it, is that render is invoked as a callback function. But does that mean that JavaScript continues running through the code in the function before stopping to move on to the next call?

Upvotes: 8

Views: 5265

Answers (3)

ggorlen
ggorlen

Reputation: 56875

No, the stack won't blow because requestAnimationFrame's callback is executed asynchronously. Async code is never run until the entire call stack is cleared. See this video for an explanation of the event loop.

Consider this demo to illustrate:

const fakeRAF = cb => setTimeout(cb, 1000 / 60);

(function rerender() {
  fakeRAF(rerender);
  console.log(performance.now());
})();

You can let this run all day. Of course, requestAnimationFrame is doing much more work than fakeRAF by essentially being very clever about computing when to fire cb, but this simple demo is sufficient to prove that it's not recursive, thanks to setTimeout providing an asynchronous API.

By the way, it doesn't matter whether requestAnimationFrame or fakeRAF is called at the top or the bottom of the function. All of the synchronous code in the function must run before the callback is fired so there is no issue of the next frame stepping on the previous one or something like that.

Upvotes: 3

Marco Stagni
Marco Stagni

Reputation: 40

After the first render() call, RequestAnimationFrame will asynchronously take care of your render function calling it every ~60 times per second. Your function is not recursive, since Javascript will continue the code execution.

However, you should use RequestAnimationFrame only at the very end of your render function, as last command of your function. Imagine you having a big scene, with a lot of animations: requesting the next frame before completing parameters update, will probably cause a huge mess.

You can also use setTimeout to handle your animations, calling the render method with the desired frame rate, like this:

var desideredFrameRate = 60;

window.myRequestAnimationFrame = function(callback) {

    setTimeout(callback, 1000/desiredFrameRate);

}

Upvotes: -1

eladcon
eladcon

Reputation: 5825

This only requests the browser to call your callback before the next rendering loop:

You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint.

So there is no recursion here, and your function continue with the execution.

You can also cancel the request for your callback with cancelAnimationFrame.

Look here.

Upvotes: 8

Related Questions