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

Question

我的意思是在同一时间内使用相同的函数调用多个requestAnimationFrame

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

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

会发生什么？它会被复制吗？它在同一个帧中会被调用两次吗？还是会被堆叠并在不同的帧中调用？

- Thaina Yu

Answer 1

以下内容来自MDN文档:

回调方法只传递一个参数：DOMHighResTimeStamp，它指示在请求动画帧时开始触发回调的当前时间。因此，在单个帧中的多个回调即使在计算之前的每个回调的工作量期间经过了时间，它们也会接收到相同的时间戳。此时间戳是以毫秒为单位的十进制数，但最小精度为1毫秒（1000微秒）。

(强调我的)

同时，从规范中得知:

当调用requestAnimationFrame()方法时，用户代理必须执行以下步骤：

...

3. 将该方法的参数附加到文档的动画帧回调列表中

和

当用户代理以时间戳now运行文档doc的动画帧回调时，它必须执行以下步骤： ... 3. 对于回调列表中的每个条目按顺序调用回调函数

所以针对你的问题: 以上所有内容显示连续的调用将被添加到回调列表中，在浏览器应该运行它们时按它们添加的顺序逐一执行，从本质上复制了代码中Draw的调用。

- James Thorpe

---

非常感谢。 - Thaina Yu

@Thaina，在你的例子中，尽管这两个请求是针对同一个函数的，但它们将在同一帧中执行。如果你的例子不同，其中一个请求被延迟了足够长的时间，那么它将在下一帧中被调用。没有任何阻止你在同一帧中请求多次执行相同的函数，即重复执行。 - Magnus Lind Oxlund