为什么在循环开始时调用 requestAnimationFrame 不会导致无限递归？

Question

发生了什么让循环的其余部分执行，然后requestAnimationFrame 执行下一帧？

我误解了这种方法的工作原理，并且在任何地方都看不到清晰的解释。我尝试在这里阅读时间规范http://www.w3.org/TR/animation-timing/，但我无法弄清楚它是如何工作的。

例如，这段代码取自threejs文档。

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

Answer 1

出于同样的原因，在循环中使用setTimeout 调度回调不会导致无限递归，它调度 JS event loop 上的下一次调用而不是执行马上。

调用不是在当前上下文中进行的，所以从技术上讲它不是严格意义上的递归，也不会导致超出堆栈限制的错误。

_{（来源：dartlang.org）}

这个图是针对 Dart 的，但是在 JS 中的概念是一样的。如果您有兴趣阅读有关事件循环、调度计时器以及微任务和宏任务之间的区别的更多信息，请查看this question。

Answer 2

会发生这样的事情：

你声明一个函数定义，调用requestAnimationFrame函数。

哪个调度你的函数在合适的时候被调用并再次执行，也就是下一帧，通常在16ms之后。此外，此调度是异步的。它不会停止执行它下面的代码。所以这行下面的代码并不是在 16 毫秒之后才能工作。

但是，在大多数情况下，函数会在 3-4 毫秒内执行。

但是如果函数需要更长的时间来完成下一帧将会被延迟，因此不会执行计划任务，即再次调用相同的函数。

从某种意义上说，动画是无限循环。 requestAnimationFrame 的目标是。但是，这种非阻塞无限循环受到帧数/fps 的限制。

Answer 3

如果我完全不在基地，请告诉我；我以前没有用过动画的东西。我看到使用requestAnimationFrame 的一个例子是：

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();

您想知道为什么 animloop 在被传递到 requestAnimFrame 时不会在随后被调用时导致无限循环吗？

这是因为这个函数真正不是递归的。您可能会认为当您调用requestAnimFrame 时会立即调用animloop。不是这样！ requestAnimFrame 是异步的。因此，语句按照您看到的顺序执行。这意味着主线程不等待对requestAnimFrame 的调用返回，在对render() 的调用之前。所以render() 几乎立即被调用。然而，回调（在本例中为 animloop）不会 立即调用。当您已经退​​出对animloop 的第一次 调用时，它可能会在将来的某个时间被调用。这个对animloop 的新调用有它自己的上下文和堆栈，因为它实际上并没有从第一个animloop 调用的执行上下文内调用。这就是为什么您不会以无限递归和堆栈溢出而告终。