案例 3:
console.log(1) setTimeout(function() { console.log(2) }, 2000) new Promise(function(resolve) { console.log(3) resolve() }).then(function() { console.log(4) }) setTimeout(function() { console.log(5) new Promise(function(resolve) { console.log(6) resolve() }).then(function() { console.log(7) }) }, 3000) setTimeout(function() { console.log(8) new Promise(function(resolve) { console.log(9) resolve() }).then(function() { console.log(10) }) }, 1000)
答案：1、3、4、8、9、10、2、5、6、7
解析：
- 区分同步任务和异步任务
console.log(1) // 同步任务 setTimeout(function() { console.log(2) // 异步任务 }, 2000) new Promise(function(resolve) { console.log(3) // 同步任务 resolve() }).then(function() { console.log(4) // 异步任务 }) setTimeout(function() { console.log(5) // 异步任务 new Promise(function(resolve) { console.log(6) resolve() }).then(function() { console.log(7) }) }, 3000) setTimeout(function() { console.log(8) // 异步任务 new Promise(function(resolve) { console.log(9) resolve() }).then(function() { console.log(10) }) }, 1000)
- 执行同步任务
console.log(1) console.log(3)
- 异步任务添加到不同任务队列中
微任务添加到微任务队列[ console.log(4) ]
new Promise(function(resolve) { console.log(3) resolve() }).then(function() { console.log(4) // 微任务 })
宏任务
由宿主发起异步，异步完成将回调放入宏任务队列
setTimeout(function() { console.log(2) // 异步任务 }, 2000) setTimeout(function() { console.log(5) // 异步任务 new Promise(function(resolve) { console.log(6) resolve() }).then(function() { console.log(7) }) }, 3000) setTimeout(function() { console.log(8) // 异步任务 new Promise(function(resolve) { console.log(9) resolve() }).then(function() { console.log(10) }) }, 1000)
进入宏任务队列
// 宏任务1: function(){ console.log(8) // 异步任务 new Promise(function(resolve){ console.log(9) resolve() }).then(function(){ console.log(10) }) } // 宏任务2: function(){ console.log(2) // 异步任务 } // 宏任务3: function(){ console.log(5) // 异步任务 new Promise(function(resolve){ console.log(6) resolve() }).then(function(){ console.log(7) }) }
- 执行微任务[]
console.log(4)
- 微任务已全部执行完成，接下来执行下一个宏任务
// 宏任务1: function(){ console.log(8) new Promise(function(resolve){ console.log(9) resolve() }).then(function(){ console.log(10) // 进入微任务 }) }
console.log(8) console.log(9)
- console.log(10)进入微任务：[console.log(10)]
console.log(10) // 微任务[]
- 微任务空，执行下一个宏任务
// 宏任务2: function(){ console.log(2) // 异步任务 }
console.log(2)
- 微任务中还是空，继续执行下一个宏任务
function(){ console.log(5) // 异步任务 new Promise(function(resolve){ console.log(6) resolve() }).then(function(){ console.log(7) // 进入微任务 }) }
console.log(5) console.log(6)
- 微任务中有[console.log(7)]
console.log(7)
```js console.log(2)
- 微任务中还是空，继续执行下一个宏任务
function(){ console.log(5) // 异步任务 new Promise(function(resolve){ console.log(6) resolve() }).then(function(){ console.log(7) // 进入微任务 }) }
console.log(5) console.log(6)
- 微任务中有[console.log(7)]
console.log(7)
- 最后微任务清空，宏任务也清空
