js面试之事件循环机制

宏任务和微任务

宏任务：

script

setTimeout/setInterval

rendering

setImmediate

……

微任务

promise.then/catch…

process.nextTick

……

过程：

先执行同步任务

同步任务执行完成之后执行异步任务

异步任务包括宏任务和微任务

将宏任务添加到宏任务队列

将微任务添加到对应的微任务队列

先执行一个宏任务，宏任务执行完成之后产看是否有可执行的微任务，如果有则执行，没有则进行下一个宏任务

例

setTimeout(() => {
    
    
    console.log('set1')
}, 0);
setTimeout(() => {
    
    
    console.log('set2')
}, 3);
new Promise(resolve=>{
    
    
    console.log('pro1')
    resolve();
}).then(()=>{
    
    
    console.log('then1')
    Promise.resolve().then(()=>{
    
    
        console.log('before timeout')
    })
})
console.log('end!!!!!')
new Promise(resolve=>{
    
    
    console.log('pro2')
    resolve()
}).then(()=>{
    
    
    console.log('then2')
})

运行结果：

pro1
end!!!
pro2
then1
then2
before timeout
set1
set2
执行过程：

setTimeout放入宏任务队列

setTimeout放入宏队列

Promise执行打印pro1

.then放入微任务队列

打印end!!!

执行Promise打印pro2

.then放入微任务队列

接下来进入微任务队列

打印then1

将Promise.resolve().then放入微任务队列

打印then2

Promise.resolve.then()执行，打印before timeout

进入下一个宏任务

setTimeout，打印set1，set2

(要注意的是，虽然setTimeout的时间是0ms，也不是立即执行的，需要等待4ms)