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

Question

我在许多示例中看到过，甚至官方文档中也经常使用requestAnimationFrame。例如：

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

为什么要将requestAnimationFrame放在函数体的顶部？对我来说，这可能会导致调用堆栈或执行环境拥塞，因为如果render函数被requestAnimationFrame调用之前其余函数体已经完成执行，因为下一帧动画已经可用了，那会发生什么？（后续所有调用同理，导致拥堵） 对我而言，似乎将requestAnimationFrame(render);语句放在函数体的最后更合理。这样，函数的其余部分始终保证在再次调用渲染函数之前已经完成执行。 我是否缺少或误解了某些内部机制，实际上将其置于顶部是推荐的方法，还是为什么经常出现？请帮助我理解，谢谢。

- user777

Answer 1

render函数将在当前帧显示之前不会被调用，而这只会发生在当前调用render返回之后。

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

这篇文章很好地描述了帧生命周期及其与requestAnimationFrame的关系。

- Frank Bessou