javascript - 为什么要把requestAnimationFrame放在函数体前面呢？

Question

只要我一直在为 Canvas 写作，我就一直在做以下事情:

function animate() {
  //do stuff in the animation

  requestAnimationFrame(animate);
}

虽然最近，我经常看到它是这样做的:

function animate() {
  requestAnimationFrame();

  //do stuff in the animation
}

虽然我当然可以以我的方式看到这样做的好处，(主要是，如果有错误，它不会继续调用更多帧)我一直无法找到调用的任何好处首先为下一帧。

有没有人解释这样做/这样做可能带来的好处？或者，你能证明不应该这样做吗？绝对需要来源，正如我在网上看到的那样，但没有人能真正给出具体的理由。

Answer 1

如果您牢记 requestAnimationFrame 只是在下一个动画处理周期请求搭便车——它实际上并没有触发动画处理周期，那么 rAF 调用的位置会更清楚。

立即调用下一个 rAF 帧将为您提供捕获下一个 rAF 循环执行的最佳机会。

例如，如果您的“内容”执行大约需要 3 毫秒，而下一个 rAF 循环在 4 毫秒后开始，那么您可能会在 4 毫秒内捕获下一个循环，而不是在 4+16 毫秒内捕获下一个循环。您似乎不可能错过下一个 rAF 周期，因为您有 4-3==1ms 的空闲时间(对于 cpu 来说几乎是永恒的)，但是系统可能会安排其他事情来耗尽您的 1ms 余量(例如垃圾收集) .

另一方面，如果您的“内容”平均需要 15 毫秒才能完成，那么请将您的 rAF 调用放在最后。将其放在最后可能会偶尔错过一次执行，但这可能比冒多个“东西”堆积的风险要好。

考虑到这一点，一般来说，将 rAF 调用放在最后会更安全，但偶尔会错过 rAF 周期。