JavaScript基础 宏任务、微任务 与 EventLoop(事件循环)

同步任务

直接执行为同步任务

异步任务

延迟执行为异步任务。异步任务又分为宏任务及微任务，微任务的优先级始终高于宏任务

例：

• 此例中then为微任务，setTimeout为宏任务
• console 及 promise为同步任务
• promise传入的回调函数属于同步任务

注意：当then内同时存在console 及 promise，则看顺序执行console或promise的回调

// 同步任务
console.log(1)
// 异步任务-宏任务 (setTimeout1)
setTimeout(() => {
  console.log(2)
}, 0)
// 异步任务-微任务
// 这里的promise属于同步任务，then属于微任务 (promise1)
new Promise((resolve, reject) => {
  console.log(3)
  resolve(3)
}).then(res => { // then1
  console.log(4)
  // promise2
  new Promise((fn1, fn2)=>{
    console.log(6)
    fn1()
  }).then(()=>{ // then2
    console.log(7)
  })
  // setTimeout2
  setTimeout(() => {
    console.log(5)
  }, 0)
})

/**
 * 第一步
 * 执行promise回调时，由于then还未执行，所以setTimeout2未插入事件队列
 * EventLoop = [promise, then1, setTimeout1]
 * 第二步
 * 执行promise-then时，此时promise及then已执行，由于微任务先于宏任务，所以promise2，then2会被插入到setTimeout1之前
 * EventLoop = [promise2, then2, setTimeout1, setTimeout2]
 */

// 这里的输出为 1 3 4 6 7 2 5