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：

回调方法传递一个参数，一个DOMHighResTimeStamp，它指示requestAnimationFrame排队的回调开始触发的当前时间。 单个帧中的多个回调因此，即使在计算每个先前回调的工作负载期间已经过了一段时间，每个回调都会收到相同的时间戳。此时间戳是十进制数，以毫秒为单位，但最小精度为1ms（1000μs）。

（强调我的）

另外，from the spec：

调用requestAnimationFrame（）方法时，用户代理必须执行以下步骤：

...


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

和

当用户代理要为具有时间戳的Document doc运行动画帧回调时，它必须运行以下步骤：

...


对于回调中的每个条目，按顺序：调用回调

所以对于你的问题：

会发生什么？它会复制吗？它会在同一帧中被调用2次吗？或者它会被堆叠并调用差异帧？

以上所有内容一起显示连续调用将被添加到回调列表中，这些回调将按照浏览器运行它们时添加的顺序一个接一个地执行，基本上重复调用代码中的Draw。

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

1 个答案: