浏览器的事件循环机制

直接看代码做题举例子

输出下面的运行结果

async function async1(){
    console.log('saync1 start')
    await async2()
    // 相当于 new Promise(()=>{async2})  
    //会同步执行
    // await 的作用就是 把它后面的函数同步执行，
    //即相当于执行了 async2函数
    //也就是放到了new Promise中去了
    // 然后再把它后面的代码放到了 then微任务里去
    console.log('async1 end')
}

async function async2(){
    console.log('async2')
}

console.log('script start')

setTimeout(() => {
    console.log('settimeout')
}, 0);

async1()

new Promise((resolve => {
    console.log('promise1')
    resolve()
})).then(() => {
    console.log('promise2')
})

console.log('script end')

分析:首先找到同步代码
1.script start
第一次宏任务开始

，添加宏任务到事件堆里，这一步这没有任何异议，再执行async，输出
2.async1 start 执行async2函数，输出 3.async2
添加了一个微任务，在该次宏任务中，接着再往下走，执行并输出4.promise1 再添加一个微任务到事件堆里 到最后一行输出
5.script end

第一次宏任务完成，开启第二次，

先处理微任务，第一个微任务是 输出6.async1 end ，再输出第二个微任务 7.promise2 ，完成之后，最后把宏任务执行了 8.settimeout

再来看个例子

console.log('start')
setTimeout(() => {
    console.log('children2')
    Promise.resolve().then(()=>{
        console.log('children3')  //当到了微任务队列里
    })
}, 0);
new Promise(function(resolve,rejecte){
    console.log('children4')
    setTimeout(() => {
        console.log('children5')
        resolve('children6')
    }, 0);
}).then((res) => {
    console.log('children7')
    setTimeout(() => {
        console.log(res)
    }, 0);
})

第一次宏任务开始，先输出 1.start ， 添加一个宏任务到事件堆里面，执行new Promise的内容 输出 2.children4 ， 再添加一个宏任务到事件堆里，第一次宏任务结束 开启第二次宏任务，输出3.children2 ，接着添加一个微任务到事件堆里面，再执行该微任务 输出 4.children3 ， 该次微任务结束后，没有其他微任务，本次宏任务结束 ，开启下一次宏任务 输出5.children5 ， 再添加一次微任务 到事件堆里，输出 6.children7 ，再输出 7.children6

相信你已经对事件循环理解了吧，再来做个练习题

const p = function (){
    return new Promise((resolve,reject) => {
        const p1 = new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve(1)
            }, 0);
             resolve(2)
        })
        p1.then((res) => {
            console.log(res)
        })
        console.log(3)
        resolve(4)
    })
}
p().then((res) => {
    console.log(res)
})
console.log('end')

3 end 2 4

如果把resolve(2)注释掉 结果又是什么?
3 end 4 1