javascript - 为什么在循环开始时调用 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

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

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

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

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