宏任务 微任务 循环队列

Event loop

js是单线程
事件循环EventLoop是指js执行环境的流程顺序，通过任务队列的机制进行协调，一个loop中可以有多个队列

共两种队列：宏任务(macrotask) 微任务(microtask)
一个 macrotask 执行结束后所有的 microtask，这是一个loop
简单总结：

1. 执行macrotask队列中最早的task，然后移出
2. 执行microtask队列中所有任务，全部移出
3. (下一个循环) 重复1 2

宏任务maccrotask包括：

• script标签中的代码
• setTimeout
• setInterval
• I/O

微任务

• Promise .then/ .catch/ .finally

例

setTimeout(() => {
    console.log("timeout")
    Promise.resolve().then(() => {
        console.log('d');
    })
}, 0);

new Promise((resolve) => {
    console.log('a');
    setTimeout(() => {
        Promise.resolve().then(() => {
            console.log('b');
        })
        console.log('c');
    }, 0);
    resolve();
}).then(() => {
    console.log("promise")
});

console.log("code")

a code promise timeout d c b

执行顺序：

输出	任务
a	宏任务1
code	宏任务1
promise	微任务1
timeout	宏任务2
d	微任务2
c	宏任务3
b	微任务3

宏任务2 3都是第一次宏任务中加入到队列中的，但执行是在清空微任务队列后