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

从MDN文档:

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

(强调我的)

另外,从规范:

调用requestAnimationFrame()方法时,用户代理必须运行以下步骤:

...

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

和

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

...

3. 对于回调中的每个条目,按顺序:调用回调

所以对于你的问题:

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

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