javascript - 为什么对 requestAnimationFrame(render) 的调用通常放在渲染函数的顶部，从而递归地调用自身？

Question

我在许多示例中看​​到过它，甚至经常在官方文档中看到它以某种形式使用 requestAnimationFrame。例如:

var render = function () {
  requestAnimationFrame(render);
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render(scene, camera);
};

为什么这里的requestAnimationFrame放在函数体的顶层？在我看来，这可能会导致调用堆栈或执行环境拥塞，因为如果 requestAnimationFrame before 调用 render 函数会发生什么它的函数体的其余部分已经完成执行，因为下一个动画帧可用了？？ (所有后续调用都一样，堵塞了事情)

在我看来，将 requestAnimationFrame(render); 语句放在函数体的last 语句中似乎更明智。因此，在对渲染函数进行另一次调用之前，始终保证函数的其余部分已完成执行。

是否有一些我遗漏或误解的内部机制，实际上是将其放在顶部推荐的方法，或者为什么它经常出现？请帮助我理解，谢谢。

Answer 1

render 函数不会在当前帧显示之前被调用，它只会在当前对 render 的调用返回后发生。

假设您当前正在计算第 n 帧。当您调用 requestAnimationFrame 时，给定的回调在第 (n+1) 帧的队列中排队。只有在显示当前帧后才会处理下一帧。

This post很好地描述了帧生命周期及其与 requestAnimationFrame 的关系。