为何这段JavaScript Canvas动画代码未出现预期的无限空循环？

首先先看你贴的这段代码（顺便提一句，代码里clearRect的括号没闭合，不过不影响咱们讨论核心问题）：

function animate() { 
  requestAnimationFrame(animate); 
  c.clearRect(0, 0, canvas.width, canvas.height; 
}

你会有这个疑问，其实是对requestAnimationFrame的执行逻辑有点误解啦！

咱们拆解一下这个过程：

• 当第一次调用animate时，第一行的requestAnimationFrame(animate)并不会立即重新执行animate函数，它只是给浏览器发了个“预约请求”：“等你下一次准备重绘页面的时候，记得把animate函数放到执行队列里哦”。
• 这个预约操作是瞬间完成的，不会阻塞当前函数的执行流程，所以代码会继续往下走，顺利执行c.clearRect(...)这行清空画布的代码，直到整个animate函数跑完，当前的调用栈被清空。
• 等浏览器准备好下一次动画帧（通常是60帧/秒的频率），就会把之前预约的animate函数从队列里拿出来执行——这时候又会重复第一步：先预约下一次的调用，再执行清空画布的代码，形成循环。

简单说，requestAnimationFrame是异步调度工具，它不会打断当前函数的执行，只是提前预约了下一轮的函数调用，所以你觉得的“无限空循环”根本不存在，每次函数都会完整执行所有代码~

内容的提问来源于stack exchange，提问作者MadScientist