requestAnimationFrame在另一个requestAnimationFrame中

Question

假设我将rAF安排在另一个rAF中。

组件1:

  update() {
    requestAnimationFrame(() => {
      this.div.addClass('animate1');
      component2.update();
    }
  }

组件2:

  update() {
    requestAnimationFrame(() => {
      this.div.addClass('animate2');
    }
  }

它是在第一次之后立即运行，还是在下一次重新绘制周期时运行？

Answer 1

我猜这两个请求动画帧都将在下一个重绘周期之前触发，它将触发2个请求动画帧，样式将一个接一个地应用，但就在下一个重绘周期之前，因此假设在每个rAf中更改相同div的颜色，则会看到颜色的闪烁。

在下面的两个图片附件中，我们可以清楚地看到多个动画帧被调用，动画帧正在触发另一个raf，然后在下一个帧之前被调用。

​

​

Answer 2

这个问题的答案主要是：“是的，你可以。requestAnimationFrame按照加法顺序执行函数。”

但是，您可能会发现，您的rAF的执行仅仅是请求的，而不是保证的，这是很有趣的。如果您的rAF函数调用超过呈现下一个帧所需的时间，那么它将无法及时完成。同样，如果只完成了一些已注册的rAF函数，那么只有一些函数有机会呈现。

在以下情况下，您应该使用一个requestAnimationFrame函数：

• 在你的应用中，性能是最重要的。
• 如果您的应用程序正在放弃rAF函数调用:饱和会导致帧不能完全呈现，或者您担心它可能会在路线图的某个时候呈现。

在以下情况下，可以使用多个requestAnimationFrame函数：

• 你的任务很简单。
• 您相信您的任务将完全在rAF和呈现本身之间运行。Aka:不饱和

因为运行更多的函数需要更多的时间(假设相同的任务)，所以您将看到人们建议只使用一个函数作为requestAnimationFrame的“呈现函数”，但是现在您知道了原因，并且可以自己做出决定。

解决了一些评论：

@kaiido说：“即使进行rAF调用的回调需要20多个，新的rAF回调也将发生在一个单独的框架中。”

让我们试试：

首先，让我们使用一些工具来测试超时：

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

现在，我们可以使用异步/等待在代码中创建一个延迟：

requestAnimationFrame(async ()=>{
  await timeout(200);
  console.log('Non blocking first');
})
requestAnimationFrame(async ()=>{
  await timeout(100);
  console.log('Non blocking second');

})

在这种情况下，它们是100%：输出是：

non blocking second
Non blocking first

函数执行的时间越长，等待的时间越短，函数运行的时间就越短，但第一次的简历越短，第二次的时间就越长。

但是，我不认为这是标准用例。更有可能的是，您正在编写阻止执行的代码：

requestAnimationFrame(async ()=>{
  while (Date.now() < start + 3000) {}
  console.log('blocking first');
})
requestAnimationFrame(async ()=>{
  while (Date.now() < start + 1000) {}
  console.log('blocking second');
})

在这种情况下，正如我最初所说的，函数是按顺序调用的，结果是

blocking first
blocking second

如果您的队列超出当前帧，则第二个函数启动的延迟将为3000 be +“等待到下一个帧”。