JS事件循环 - 举例详解

JS中的事件循环

• JS是单线程执行的，而基于事件循环模型，形成了基本没有阻塞（除了alert或同步XHR等操作）的状态

• 每一个线程都拥有

  1. 至少一个任务队列 （宏任务）各个任务队列存放不同来源的任务，浏览器可根据需要进行优先级排序
  2. 以及一个微任务队列：主要用于处理一些状态的改变，UI渲染工作之前的一些必要操作

• 事件循环中每一次循环称为一个 tick

• 事件循环机制：

  • 从宏任务队列中取出一个宏任务执行，执行过程中继续将遇到的任务分类放入宏任务、微任务队列

  • 当该宏任务执行完毕之后，清空微任务队列（执行）

  • 继续下一个宏任务，依次循环

• 常见的宏任务有：

  • run

console.log('script start')

setTimeout(function() {
  Promise.resolve().then(() => {
    console.log('then2')
  })
  console.log('timeout1')
}, 10)

new Promise(resolve => {
  console.log('promise1')
  resolve()
  setTimeout(() => console.log('timeout2'), 10)
}).then(function() {
  console.log('then1')
})

console.log('script end')

// script start
// promise1
// script end
// then1
// timeout1
// then2
// timeout2

执行过程分析

• 首先 script (整体代码) 是一个宏任务 直接输出 script start
• 遇到 setTimeout ，将回调函数放入宏任务队列
• 遇到 Promise, 直接输出 promise1
• 遇到 resolve, 将 promise 的 then 回调放入微任务队列
• 遇到 setTimeout，将回调放入宏任务队列
• 直接输出script end
• 当前宏任务 tick 结束

此时宏任务队列： [ 第一个setTimeout, 第二个setTimeout ] 微任务队列：[new Promise的回调]

• 清空微任务队列: 输出 then1
• 执行宏任务队列，第一个setTimeout
• 遇到 Promise，将回调放入微任务队列
• 直接输出 timeout1
• 当前宏任务 tick 结束

此时宏任务队列： [ 第二个setTimeout ] 微任务队列：[promise.resolve 的回调]

• 清空微任务队列: 输出 then2

• 当前宏任务 tick 结束

• 执行最后一个宏任务 第二个 setTimeout

• 输出 timeout2