事件循环—宏任务和微任务

121 阅读1分钟

12. 宏任务 微任务 是什么

生活比喻:

  • 小赵和小王去银行办业务,首先,需要取号之后进行排队

    • 宏任务队列
  • 假设当前银行网点只有一个柜员来办理业务,那么小赵在办理业务时,小王只能等待

    • 单线程,宏任务依次执行
  • 小赵主要是来办理存款业务,顺便再来办理一张信用卡,兑换一张马年纪念币

    • 宏任务执行完成,检查执行相关的微任务
  • 那么就需要等待小赵办理完所有的业务以后才能给小王办理相关业务

    • 以上所有的微任务执行完毕,再去执行下一个宏任务

小例题:

console.log(1)

setTimeout(function () {
  console.log(2)
}, 0)

console.log(3)

宏任务: 主线程代码, setTimeout 等属于宏任务, 上一个宏任务执行完, 才会考虑执行下一个宏任务

微任务: promise .then .catch 的需要执行的内容, 属于微任务, 满足条件的微任务, 会被添加到当前宏任务的最后去执行

image-20201208040306978

事件循环队列 eventLoop

image-20201208040235602

例题 1:

console.log(1)

setTimeout(function () {
  console.log(2) // 宏任务
}, 0)

const p = new Promise((resolve, reject) => {
  resolve(1000)
})
p.then((data) => {
  console.log(data) // 微任务
})

console.log(3)

image-20210306151137688

例题 2:

async function fn() {
  console.log(111)
}
fn()
console.log(222)

例题 3:

async function fn() {
  const res = await 2
  console.log(res)
}
fn()
console.log(222)

例题 4:

async function fn() {
  console.log('嘿嘿')
  const res = await fn2()
  console.log(res) // 微任务
}
async function fn2() {
  console.log('gaga')
}
fn()
console.log(222)

image-20210306152010989

考察点: async 函数只有从 await 往下才是异步的开始

\