What happens when I call requestAnimationFrame several times

Question

I mean calling multiple requestAnimationFrame with the same function at a time

function Draw() { /* DoSomething */ } function AFunc() { /* prepare something */ requestAnimationFrame(Draw); } function BFunc() { /* prepare something */ requestAnimationFrame(Draw); } window.onload(function(){ AFunc(); BFunc(); }); 

What will happen? Will it be duplicated? Will it be called 2 times in one frame? Or will it be stacked and called up by a difference frame?

Answer 1

From the MDN documentation :

The callback method is passed one argument, DOMHighResTimeStamp, which indicates the current time when the callbacks requested by requestAnimationFrame are started. Multiple callbacks in one frame, so each gets the same timestamp, even if the time has passed during the calculation of each previous callback workload . This timestamp is a decimal number in milliseconds, but with a minimum accuracy of 1 ms (1000 μs).

(my emphasis)

In addition, from the specification :

When the requestAnimationFrame () method is called, the user agent must complete the following steps:

...

3. Add a method argument to the animation frame callback docs list

and

When a user agent needs to run animation frame callbacks for a Document with a timestamp, it must follow these steps:

...

3. For each entry in callbacks, to: call a callback

So for your question:

What will happen? Will it be duplicated? Will it be called 2 times in one frame? Or will it be stacked and called up by a difference frame?

The above together shows that consecutive calls will be added to the callback list, which will be executed one after another in the order in which they were added when the browser should launch them, essentially duplicating the Draw call in your code.