先上代码
console.log(1)
// setTimeout1
setTimeout(function () {
new Promise(function (resolve) {
console.log('promise in setTimeout1')
resolve()
}).then(function () {
console.log('then in setTimeout1')
})
}, 10)
new Promise(function (resolve) {
console.log(3)
for (var i = 100000; i > 0; i--) {
i == 1 && resolve()
}
console.log(4)
}).then(function () {
console.log(5)
})
// setTimeout2
setTimeout(function () {
console.log('setTimeout2')
}, 10)
console.log(7)
执行顺序
- 首先 js 整块代码为宏任务，放入宏任务队列，为第一个宏任务，所以先执行第一个，结果先输出 1
- 遇到第一个 setimeout 放入定时器线程，等定时器执行完，将回调放入 宏任务队列中，10ms 后放入宏任务队列，此时回调队列中有
[js整块代码为一次宏任务,setimout1的回调]
- 继续执行,看到 promise.then 为微任务，所以先将 newpromis 中的同步操作先输出 3、4，然后将.then 回调放入 微任务队列中，所以现在微任务队列有
[.then]
- 继续向下执行 看到 setimout 为宏任务，所以先放入宏任务队列中去不管他,所以当前宏任务队列中有
[js整块代码为一次宏任务,setimout1的回调,setimout2的回调]
- 执行输出 7 ,到此 第一次宏任务也就是 js 整体代码块执行完了，然后看看 有没有待执行的微任务，现在微任务队列中有
[.then]所以输出 5 ,然后没有微任务了
以上 js 第一次宏任务执行完毕，输出结果为,1-3-4-7-5 接下来，看看宏任务队列是否有其他的宏任务,我们看到第四点中 宏任务队列有[js整块代码为一次宏任务,setimout1的回调,setimout2的回调],那接下来执行第二个宏任务，也就是 setimout1 的回调
- setimout1 回调部分，可以看到顺序执行，有一个输出
console.log('promise in setTimeout1');，然后有个.then 的回调函数输出 console.log('then in setTimeout1');根据机制，肯定先执行宏任务后执行.then 微任务，到此执行结果为：1-3-4-7-5-promise in setTimeout1-then in setTimeout1
- ,接下来看到当前宏任务中没有其他微任务了，所以接着执行宏任务队列中第三个宏任务，也就是 setimout2 的回调
所以最后的结果为1->3->4->7->5->promise in setTimeout1->then in setTimeout1->setTimeout2
总结：
- 宏任务有宏任务队列
- 微任务有微任务队列
- js 一次只能执行一个宏任务
- 执行完第一个宏任务，准备执行第二个宏任务的时候要看看微任务队列中有没有可执行的微任务，如果有，优先将微任务执行完成
以上的过程不断地重复就形成了 EVENT-LOOP
