浏览器的任务队列:

主任务队列都是同步任务;
等待任务队列存储的都是异步任务。
浏览器会把主任务队列中的同步任务挨个执行完,然后再去等待任务队列中看哪个任务可以执行了,而后就把该执行的任务放到主任务队列中去执行;等这个任务执行完,再去等待任务中看谁可以执行了,再把这个任务放到主任务队列中执行,如此循环,这种循环就叫做事件循环。(event loop)

常见的宏任务:script(整体代码)、setTimeout、setInterval
常见的微任务:promise、async函数await下面的代码

任务的优先级:promise.then>setTimeout(微任务的优先级要高于宏任务)

一道经典例题:

 var foo = 100;
 async function main(){
    foo = foo + await Promise.resolve(10);
    console.log('main',foo);
 }
 main();
 foo++;
 console.log('global',foo);

打印出来的结果是:

global,101;
main,110

再来一道经典例题:

    async function t1(){
        console.log(1);
        console.log(2);
        await new Promise(resolve =>{
            setTimeout(()=>{
                console.log('t1p');
                resolve();
            },1000)
        })
        await console.log(3);
        console.log(4);
    }
    async function t2(){
        console.log(5);
        console.log(6);
        await Promise.resolve().then(()=>console.log('t2p'));
        console.log(7);
        console.log(8);
    }
    
    t1();
    t2();
    
    console.log('end');

打印出来的结果是:

1,
2,
5,
6,
end,
t2p,
7,
8,
t1p,
3,
4

注意区分await后面的语句,

如果不是promise对象,则跟着执行await后面的语句;
如果是peomise对象,则跳过promise,执行外面的同步任务

王超
42 声望1 粉丝

世间美好,与你环环相扣。