JS 【宏任务 微任务】

只讨论JS 浏览器环境,不看node环境

一张用烂的图,但是很直观的表现了代码的执行顺序

执行宏任务 -->  执行当前一轮的event Loop中的微任务 -->  执行完开始下轮的宏任务  ->  开始执行当前一轮的event Loop中的微任务

 

宏任务: setTimeOut   setInterval

(所有的同步代码共同构成了第1轮宏任务)

微任务: promise的回调

(new Promise()本身为同步代码,定义即执行)

 1 console.log('start')
 2 
 3 setTimeout(() => {
 4   console.log('setTimeout')
 5 }, 0)
 6 
 7 new Promise((resolve) => {
 8   console.log('promise')
 9   resolve()
10 })
11   .then(() => {
12     console.log('then1')
13   })
14   .then(() => {
15     console.log('then2')
16   })
17 
18 console.log('end')

1. 同步代码为第一轮宏任务:start

2. settimeout  放入第二轮宏任务队列

3. promise 立即执行:promise

4. .then为放入微任务队列

5. 输出end,同步代码执行完毕,第一轮宏任务执行完毕

6. 检查第一轮循环中的微任务队列, 两个.then, 输出then1  then2

7. 第一轮事件循环完毕,进入第二轮事件循环,执行宏任务,输出setTimeOut

 

posted @ 2021-06-07 16:11  行屰  阅读(49)  评论(0编辑  收藏  举报