微任务、宏任务、立即执行函数(async await)

2019-08-15  本文已影响0人  Simon_s
async function b() {
    console.log('b');
    await c();
    console.log('b1');
}
async function c() {
    console.log('c');
    await new Promise(function(resolve, reject) {
        console.log('promise1');
        resolve();
    }).then(() => {
        console.log('promise1-1');
    });
    setTimeout(() => {
        console.log('settimeout1');
    });
    console.log('c1');
}
new Promise(function(resolve, reject) {
    console.log('promise2');
    resolve();
    console.log('promise2-1');
    reject();
}).then(() => {
    console.log('promise2-2');
    setTimeout(() => {
        console.log('settimeout2');
        new Promise(function(resolve, reject) {
            resolve();
        }).then(function() {
            console.log('?');
        });
    });
}).catch(() => {
    console.log('promise-reject');
});
console.log('200');
b();
promise2   
promise2-1
200
b
c
promise1
promise2-2
promise1-1
c1
b1
settimeout2
?
settimeout1
微任务:
1、promise2-2 
2、promise1-1
宏任务
1、settimeout2
2、settimeout1
步骤讲解:
1、从上自下执行, new Promise 函数立即执行              打印 :promise2   一
2、resolve()   将  promise2-2   放入微任务队列中
3、继续向下执行                                       打印 :promise2-1  二
4、settimeout2放入宏任务队列
5、继续执行、无立即执行                                  打印 :200       三
6、执行  b() 函数                                              打印 :b  四
7、执行  await c() 函数                                        打印:c   五
8、进入 await c() 函数  中  nen Promise 函数             打印 :promise1  六
9、resolve()   将  promise1-1   放入微任务队列中
10、settimeout1  放入宏任务队列
11、暂无执行任务   去微任务中 执行第一个进入微任务的待执行动作  打印:promise2-2   七
12、继续执行微任务中序列中待执行动作                           打印:promise1-1  八
13、微任务中暂无执行 动作 继续执行  c()  函数中的待执行代码            打印:c1    九
14、c() 执行完毕,继续执行 b() 函数中待执行代码                         打印:b1  十
15、至此,立即执行以微任务执行完毕,执行宏任务队列中第一个进入的待执行任务       打印 :settimeout2   十一
16、宏任务一中,执行 new Promise  函数    resolve()   将问号 放入微任务中   立即执行微任务  打印:? 十二
17、继续执行宏任务中待执行动作                                                 打印:settimeout1   十三
上一篇下一篇

猜你喜欢

热点阅读