JS事件循环（Event Loop）宏任务微任务

1 代码

首先，直接上代码（我的作业）：

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

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

                new Promise((resolve) => {
                    console.log(5);
                })

                async function asyn1() {
                    console.log(6);
                }

                asyn1().then(() => {
                    console.log(7);
                })

                console.log(8);

直接说一下运行结果：

 3 5 6 8 4 7 2 1

2 为什么会这样

从我的理解来看，这是由于JS中的事件循环机制（Event Loop）决定的，JS中的事件循环将任务队列分为宏任务（Tasks）和微任务（Microtasks）。任务队列的调度机制和我们想的不一样，因此结果页不一样。

2.1 什么任务属于宏任务/微任务

宏任务队列包含任务：

script(主程序代码)，setTimeout，setInterval，setImmediate，I/O，UI rendering

微任务队列包含任务：
process.nextTick，Promises，Object.observe，MutationObserver

2.2 揭晓流程

                // 打印次序： 3 5 6 8 4 7 2 1 
                // log(1) 延迟至宏任务队列，延迟0.1s执行
                // log(2) 延迟至宏任务队列，不延迟
                // log(3) 直接打印，then中的log(4)到微任务队列
                // log(5) new Promise()直接打印；
                // log(6) 异步方法（相当于一个隐式的Promise），打印
                // log(7) then 到微任务队列
                // log(8) 直接打印
                // 至此，一次事件循环结束，轮询微任务队列，再轮询宏任务队列
                // 微任务队列，log(4),log(7)
                // 下一轮的宏任务：log(2),log(1)

3 小结

这是第一次对JS的事件处理进行分析，有什么错误还请包涵和指正。