js事件循环

三个概念

  1. 执行栈 - 简单理解为执行代码的地方
  2. 微任务队列 - 存放微任务的地方
  3. 宏任务队列 - 存放宏任务的地方

执行流程

  1. 代码放入执行栈执行
  2. 执行栈运行完,从微任务队列取一个微任务放到执行栈执行(进入1)
  3. 如果没有微任务,取一个宏任务放到执行栈执行(进入1)

验证代码

console.log('开始添加任务')
Promise.resolve().then(() => {
    console.log('微任务1')
    Promise.resolve().then(() => console.log("微任务3"))
})
setTimeout(() => console.log("宏任务1"))
Promise.resolve().then(() => {
    console.log('微任务2')
    Promise.resolve().then(() => console.log("微任务4"))
})
setTimeout(() => console.log("宏任务2"))
console.log("任务添加完成, 开始执行")

/** 
 * 执行顺序应该为:
 * 开始添加任务
 * 任务添加完成, 开始执行
 * 微任务1
 * 微任务2
 * 微任务3
 * 微任务4
 * 宏任务1
 * 宏任务2
 */