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

【问题标题】：What happen when I call requestAnimationFrame multiple times当我多次调用 requestAnimationFrame 时会发生什么
【发布时间】：2016-06-07 08:00:38
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript requestanimationframe

【解决方案1】：

来自the MDN documentation：

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

（强调我的）

另外，from the spec:

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

...

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

和

当用户代理现在要为带有时间戳的文档文档运行动画帧回调时，它必须运行以下步骤：

...

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

所以对于你的问题：

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

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

【讨论】：

非常感谢
@Thaina，在您的示例中，尽管请求是针对相同功能的，但两个请求都将在同一帧中执行。如果您的示例有所不同，以至于一个请求被充分延迟，它将在下一帧被调用。没有什么可以阻止您请求在同一帧中执行相同的函数两次或多次，即重复。