JS异步执行顺序

朴灿烈づ我的快乐病毒、 2024-04-17 15:09 64阅读 0赞

# JS异步执行顺序 #

今天在重温promise的时候，突然发现了一个有趣的题目：

我们先放上结果：

1 9 5 0 6 2 7 4 8 3

## 简要讲述 ##

首先我们知道JS分为了同步和异步，并且是顺序是先同步后异步，也就是同步代码执行完成后，哪怕异步代码到了它执行的时候，也会先让同步执行完。但是JS的执行顺序还可以分得更细，那就是异步的顺序。  
我们知道很多异步任务，比如：

setTimeout, setInterval, setImmediate, Promises.then, Promise.catch

甚至还有nodejs中的process.nextTick等，就像我们知道process.nextTick比promise先执行一样。那么这些异步事件是谁先执行谁后执行呢。  
这涉及到了事件循环(event loop)。事件循环也就是事件出入栈。  
上面说了这么多异步任务，我们先把它们分为两类：  
宏任务（macro-task）：setTimeout, setInterval, setImmediate  
微任务（micro-task）：Promises.then, Promise.catch

然后我们再明白一个概念：先执行微任务，再执行宏任务。这种执行是，先执行清空微任务队列，再执行宏任务，当当前宏任务执行完后，微任务队列中又有微任务，再次将微任务队列执行完，再执行下一个宏任务。

在异步任务执行过程中遇到宏任务与微任务，将其依次放入当前事件循环队列中。

## 例题描述 ##

首先执行主线程，也就是script（script是宏任务），因为此时没有微任务

然后遇到`setTimeout(() => { console.log(0);});` 这是宏任务，将其放入宏任务队列中 记为 – 宏任务1

promise新建后会立即执行，输出`1`

然后将

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

继续放入宏任务队列中 记为 – 宏任务2

将`Promise.resolve().then(() => console.log(5));`放入微任务队列中 记为 – 微任务1

继续往下走，输出`9`

此时当前宏任务执行完毕，开始执行微任务队列，目前微任务队列中只有微任务1，执行，输出`5`

微任务队列此时清空，然后执行宏任务1，输出`0`

微任务队列依然没有任务，继续执行宏任务2，遇见 `resolve();`，于是将

.then(() => {
            console.log(6);
            Promise.resolve().then(() => console.log(7));
            setTimeout(() => console.log(8));
        });
        console.log(9);
    })

放入微任务队列中，记为 – 微任务2，再将

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

记为 – 微任务3

当前宏任务执行完毕，开始执行微任务，先执行微任务2，输出`6`；将`Promise.resolve().then(() => console.log(7));`记为 – 微任务4；`setTimeout(() => console.log(8));`记为 – 宏任务3

执行微任务3，输出`2`；将`setTimeout(() => console.log(3));`记为 – 宏任务4；将`Promise.resolve().then(() => console.log(4));`记为 – 微任务5；

此时队列中依然有微任务，执行微任务4，输出`7`；执行微任务5，输出`4`；微任务队列执行完毕

执行宏任务3，输出`8`；执行宏任务4，输出`3`；全部执行完毕

那么我们的结果为`1 9 5 0 6 2 7 4 8 3`