当我多次调用 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:

...

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:

...

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 的调用。

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

What happen when I call requestAnimationFrame multiple times

javascript

requestanimationframe