宏任务与微任务学习

210 阅读1分钟
// 3 7 4 1 2 5
const first = () => (new Promise((resolve, reject) => {
	console.log(3);
    let p = new Promise((resolve, reject) => {
      	console.log(7);
      	setTimeout(() => {
        	console.log(5);
            resolve(6);
        }, 0)
      resolve(1)
    })
  resolve(2)
  p.then((arg) => {
  	console.log(arg)
  })
}))
first().then((arg) => {
	console.log(arg)
})
console.log(4)

具体执行顺序如下:

first是一个立即执行函数(es6语法)
首先执行console.log(3) 然后进入promise p 执行 console.log(7)
当前输出: 3 7setTimeout()放入宏队列 当前宏队列[setTimeout1]
然后到达resolve(1) p的状态为onresolved 值为1 到达resolve(2) first状态为onresolved 值为2
p.then放入微队列 first.then 放入微队列 
执行console.log(4)
当前输出 3 7 4
全局执行完毕 开始执行微任务
首先执行p.then 
当前输出 3 7 4 1 
执行first.then 微队列执行完毕
当前输出 3 7 4 1 2
执行宏队列 首先输出5
当前输出 3 7 4 1 2 5
再执行first.resolve(6) 因为promise的pending状态只能改变一次 所以没有输出
执行结果:3 7 4 1 2 5