为什么在循环开始时调用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它不会导致随后被调用的无限循环？

这是因为这个函数不是真正的递归.您可能认为animloop在致电时会立即呼叫requestAnimFrame.不是这样!requestAnimFrame是异步的.因此,语句按您看到的顺序执行.这意味着,主线程不等待呼叫到requestAnimFrame返回,之前调用render().所以render()几乎立即被召唤.但是,不会立即调用回调(在本例中为animloop).当你已经退出第一次通话时,可能会在将来某个时候调用它.这种新的呼叫都有自己的内容和堆栈,因为它并没有被真正从所谓的内第一的执行上下文调用.这就是为什么你最终没有无限递归和堆栈溢出.animloopanimloopanimloop

Answer 2

这是发生的事情:

你声明一个函数定义,调用requestAnimationFrame函数.

其中安排你的函数中调用和执行时再一次是正确的,这是下一帧是16毫秒后一般.此外,此调度是异步的.它不会停止在它下面执行代码.所以它不像这行下面的代码在16ms过去之后才会起作用.

但是,在大多数情况下,功能在3-4毫秒内执行.

但是如果函数花费更长的时间来完成,则下一帧将被延迟,从而不执行将再次调用相同函数的调度任务.

从某种意义上说,动画是无限循环.requestAnimationFrame的目标是什么.但是,这种非阻塞无限循环受帧/ fps的限制.