• JS 是单线程运行的
  • 异步（setTimeout， ajax等）要基于回调来实现
  • event loop 就是异步回调的实现原理
  • DOM事件也是使用回调，基于 event loop

JS如何执行

  • 从前往后，一行行执行
  • 若某一行执行报错，则停止下面代码
  • 先把同步代码执行完，在执行异步
  1. console.log('HI')
  3. setTimeout(function cb1() {
  4.     console.log('cb1')
  5. }, 5000)
  7. console.log('Bye')
  9. // HI
  10. // Bye
  11. // cb1

event loop 执行过程

  1. 同步代码，一行行放在 Call Stack 执行
  2. 遇到异步，会先【记录】下，等待时机（定时、网络请求）
  3. 时机到了，就推到 Callback Queue
  4. 若 Call Stack 为空（即同步代码执行完）Event Loop 开始执行轮询
  5. 轮询查找 Callback Queue， 若有则移动到 Call Stack 中执行
  6. 然后继续轮询查找（永动机一样）

image.png