Why doesn't calling the requestAnimationFrame call at the start of the loop cause infinite recursion?

Question

What happens, which allows the rest of the loop to be executed, and then for requestAnimationFrame to execute the next frame?

I do not understand how this method works, and cannot see a clear explanation anywhere. I tried reading the time specification here http://www.w3.org/TR/animation-timing/ , but I could not understand how this works.

Edit:

For example, this code is taken from the 3js documentation.

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

Answer 1

Please let me know if I am completely out of base; I have not used animation before. An example that I saw for using requestAnimationFrame is:

 (function animloop(){ requestAnimFrame(animloop); render(); })(); 

You wonder why animloop , as it is passed in requestAnimFrame , does not cause an infinite loop when it is subsequently called?

This is because this function is not truly recursive. You might think that animloop is called immediately when you call requestAnimFrame . Not this way! requestAnimFrame is asynchronous. Thus, the statements are executed in the order you see. This means that the main thread does not wait to call requestAnimFrame to return before calling render() . Therefore, render() is called almost immediately. However, the callback (which in this case is animloop ) is not called immediately. It can be called at some point in the future when you have already left the first animloop call. This new animloop call has its own context and stack, since it is not actually called from the execution context of the first animloop call. This is why you are not ending infinite recursion and stack overflow.

Answer 2

Here's what happens:

you declare a function definition, call the requestAnimationFrame function.

What schedule will your function call and execute again when the time is right, namely the next frame , which is usually after 16 ms. In addition, this scheduling is asynchronous. This will not stop the code below. Thus, it does not look like the code below this line will not work until 16 ms.

However, in most cases, the function is performed within 3-4 ms.

But if the function had to take longer to finish the next frame, it would be delayed, thus not fulfilling the scheduled task, which should again call the same function.

In a sense, animation is an endless loop. What requestAnimationFrame is intended to be. However, this non-blocking infinite loop is limited to frames / fps .

Answer 3

For the same reason that scheduling a callback with setTimeout in a loop will not result in infinite recursion, it plans the next call in the JS event loop instead of executing it immediately.

The call was not made in the current context, so it is technically not a recursion in the strict sense of the word and will not lead to errors exceeding the stack limit.

_{(source: dartlang.org )}

This chart is for Dart, but the concept in JS is the same. If you want to know more about event loops, timer scheduling, and the difference between microtasks and macros, check out this question .