javascript - 当我多次调用 requestAnimationFrame 时会发生什么

Question

我的意思是一次性调用多个具有相同功能的requestAnimationFrame

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

window.onload(function(){
   AFunc();
   BFunc();
});

会发生什么？会复制吗？它会在同一帧中被调用 2 次吗？或者它会被堆叠并在不同的框架上调用？

Answer 1

来自 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).

(强调我的)

此外，from the spec :

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

...

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

和

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:

...

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

所以对于你的问题:

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?

上面的所有内容表明，连续的调用将被添加到回调列表中，当浏览器将要运行它们时，这些调用将按照添加的顺序一个接一个地执行，本质上是重复调用Draw 在您的代码中。