一个例子理解宏任务与微任务

447 3 前端 2021-01-12

众所周知,JavaScript在浏览器上运行机制是单线程的,这是在浏览器发展的初期就决定的特点。就像一个人要起床,刷牙洗脸,出门,这是无法同时进行的,只能按照一定的顺序执行。

假设运行下面的代码:

console.log(1);

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

new Promise(resolve => {
    console.log(3);
    resolve();
}).then(() => {
    console.log(4);
});

console.log(5);

这段代码的所有同步代码会在主线程上执行,形成一个执行栈,执行结果依次打印1、3、5

setTimeout的结果会创建宏任务插入到宏任务队列,打印2

Promisethen的结果会创建微任务插入到微任务队列,打印4

因为单线程的原因,这三个任务会按照 宏任务->微任务 顺序执行,而Promisethen会在当前宏任务的结束后紧跟着执行,所以最终打印顺序为1、3、5、4、2。

© 2020 peal.cc 粤ICP备2020133024号