What happen when I call requestAnimationFrame multiple times

问题

I mean calling multiple requestAnimationFrame with the same function in one 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 duplicated? Would it be called 2 times in the same frame? Or it would be stacked and called on difference frame?

回答1:

From the MDN documentation:

The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the current time when callbacks queued by requestAnimationFrame begin to fire. Multiple callbacks in a single frame, therefore, each receive the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs).

(emphasis mine)

Also, from the spec:

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

...

Append the method's argument to document's list of animation frame callbacks

and

When the user agent is to run the animation frame callbacks for a Document doc with a timestamp now, it must run the following steps:

...

For each entry in callbacks, in order: invoke the callback

So for your question:

What will happen? Will it duplicated? Would it be called 2 times in the same frame? Or it would be stacked and called on difference frame?

The above all taken together shows that consecutive calls will be added to a list of callbacks, which will all be executed one after the other in the order they were added when the browser is due to run them, essentially duplicating the call to Draw in your code.

来源：https://stackoverflow.com/questions/37673711/what-happen-when-i-call-requestanimationframe-multiple-times

标签

javascript

requestanimationframe