我们都知道异步是js的核心理念之一。但是在我使用的过程中我会发现，在多个异步同时进行的时候，如何判断他们的执行顺序就是一个很关键的问题。
这里就涉及到Event-Loop（事件循环），task(宏任务)，Microtasks（微任务）。
事件循环（Event-Loop）
首先来看一段异步的代码
console.log('start')
setTimeout(()=>{
console.log('time')
},0)
console.log('end')
//输出start,end,time
这里的setTimeout就是一个典型的异步函数，在外层两个console依次执行完之后在执行
js的机制是先运行同步的任务，将异步的任务挂着，等待同步的任务执行完之后在执行。
同步任务执行完成之后，执行异步任务，在异步任务内继续该循环。这就是js的事件循环机制。
console.log('start');
setTimeout(() => {
console.log('1');
setTimeout(() => {
console.log('2');
}, 0);
console.log(`3`);
}, 0);
console.log('end');
//输出1,3,2
在这个例子中我们看出在setTimeout里面的setTimeout函数也是遵循着这一规定。
我们在看一个层次多一点的例子
console.log('start');
const out1 = setTimeout(() => {
console.log('1');
const inner1 = setTimeout(() => {
console.log('2');
const inner2 = setTimeout(() => {
console.log('3');
}, 0);
console.log('4');
}, 0);
console.log(`5`);
}, 0);
const out2 = setTimeout(() => {
console.log('6');
}, 0);
console.log('end');
//输出1,5,6,2,4,3
1.执行同步的任务，打印出start,end，将外层的out1,out2函数放入微队列
2.执行微队列，执行out1函数，打印1，5，将inner1放入微队列
3.执行out2，打印6
4.执行inner1,打印2，4，将inner2放入异步队列
这就是一个事件循环的例子
宏任务（task）和微任务(Microtasks)
宏任务
宏任务一般是用来执行一些主线的任务，在两次宏任务的间隙，会进行页面的渲染。
宏任务1===>渲染===>宏任务2 ...
以下异步函数是归于宏任务的
setTimeout
setInterval
setImmediate (Node)
requestAnimationFrame (浏览器)
I/O
微任务
微任务一般是用来更新程序的状态，一般需要在本次宏任务结束之后立即执行的。
微任务在页面渲染之前执行，用来减少程序的重新渲染
以下异步函数是归于微任务的
process.nextTick (Node)
Promise.then()
catch
finally
Object.observe
MutationObserver
宏任务中的微任务是在当前宏任务完成之后马上执行的，我们可以将整个js程序看作第一个宏程序，在第一次结束宏任务之后会调用里面的微任务。
（js主程序==>主程序中的微任务==>宏任务1==>宏任务1中的微任务==>宏任务中的微任务2==>宏任务2...）
console.log('start');
const out1 = setTimeout(() => {
console.log('1');
console.log(`2`);
}, 0);
const p1 = new Promise((resolve) => {
resolve();
console.log(`3`);
});
p1.then((a: any) => {
console.log(`4`);
});
console.log('end');
//打印start,3,end,4,1,2
在执行了主程序之后，将p1.then放入了微任务队列，将out1放入了宏任务队列，执行p1.then然后执行out1这和我们上文所描述的顺序是相同的
console.log('start');
const out1 = setTimeout(() => {
console.log('1');
new Promise((resolve) => {
resolve();
}).then((res) => {
console.log(`2`);
});
console.log(`3`);
}, 0);
const out2 = setTimeout(() => {
console.log('4');
new Promise((resolve) => {
resolve();
}).then((res) => {
console.log(`5`);
});
console.log(`6`);
}, 0);
const p1 = new Promise((resolve) => {
resolve();
console.log(`7`);
});
p1.then((a) => {
console.log(`8`);
});
console.log('end');
//打印start,7,end,8,1,3,4,6,2,5
1.在执行了主程序之后，将out1,out2放入了宏任务队列，将p1.then放入了微任务队列
2.执行p1.then
3.然后执行out1，将out1中的promise放入微任务队列
4.执行out1中的promise
5.执行out2，将out2中的promise放入微任务队列
6.执行out2中的promise