node中我对Event Loop和宏任务，微任务的理解

最新推荐文章于 2025-02-17 16:30:06 发布

原创最新推荐文章于 2025-02-17 16:30:06 发布 · 1.6w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#node的事件循环 #微任务和宏任务

Node 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨JavaScript的异步执行机制，包括任务队列、主线程、宏任务和微任务的概念，通过具体示例解析执行顺序及原因，帮助读者理解setTimeout、Promise、process.nextTick等异步函数的行为。

开始理论部分

1.任务队列和主线程

任务分为两种，一种同步任务，一种是异步任务。同步任务会在主线程执行

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

那又什么是宏任务和微任务呢，单拿出来同步任务，也分宏任务和微任务。执行顺序就是先执行宏任务，再执行微任务。

在异步队列里是不是也有宏任务和微任务，那是当然，执行顺序也是一样。现在我们只要记住谁是宏任务，谁是微任务，谁在前谁在后就行了

宏任务

一般普通的代码都是宏任务，一步一步往下执行。for循环，声明变量，声明函数等等

#	浏览器	Node
setTimeout	√	√
setInterval	√	√
setImmediate	x	√
requestAnimationFrame	√	x

微任务

#	浏览器	Node
process.nextTick	x	√
MutationObserver	√	x
Promise.then catch finally	√	√

我下边举个例子，一边看这个例子，一边看我上边列出来那个宏任务和微任务那个表

setTimeout(() => {
    //执行后 回调一个宏事件
    console.log(1)
}, 0)
console.log(2);

new Promise((resolve) => {
    console.log(3);
    resolve()
}).then(() => {
    console.log(4);
}).then(()=>{
    console.log(5);
})
//node执行结果 2 3 4 5 1

首先千万不要把异步队列和这个宏任务微任务搞混，认为异步的就微任务，那是没理解透。

分析上边代码。

1. 代码从上往下执行，先遇见一个setTimeout，一看是个微任务，你先等等，看看有没有宏任务要执行。
2. 发现有，console.log(2)；他是这个代码最外层中唯一宏任务，不用考虑，执行掉。
-------> 输出 2
3. 剩下一个Promise和setTimeout，都是微任务，谁在前边谁先执行。
4. 解析到setTimeout,发现是个异步任务，就给他扔到异步队列里去了，等我们主线程完事再管你。
5. 然后就是Promise执行了，这个console.log(3);就被执行了。
--------> 输出 3
6. 当程序发现了then,这又是个异步任务啊。那你也去异步队列里去排队去。
7. 这个时候你会想，我懂了。然后就是1，4，5，可是结果却是4，5，1 // console.log(1)这个时候有想法了，怎么的我们都是console.log你俩凭啥在我前边，而且我就算是排队也是我先输出啊
这个问题出在这里。异步队列中的这个setTimeout里的回调虽然排队排第一个了，但是时间还没到。
HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加
也即是说,第一次主线程空了去轮询异步队列时,setTimeout时间未到.也就是说看着是0实际上还是有时间的,所以就出现这个问题了

------>继续输出4 ，5 ， 1

除了setTimeout和setInterval这两个方法
Node.js还提供了另外两个与任务队列有关的方法：process.nextTick和setImmediate。
process.nextTick方法可以在当前"执行栈"的尾部----下一次Event Loop（主线程读取"任务队列"）之前----触发回调函数。
也就是说，它指定的任务总是发生在所有异步任务之前。
setImmediate方法则是在当前"任务队列"的尾部添加事件，也就是说，它指定的任务总是在下一次Event Loop时执行

so利用下边的案例，就能彻底解决疑惑


console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})

process.nextTick(function() {
    console.log('6');
})

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

先公布答案：

执行结果是：1，7，6，8，2，4，9，11，3，10，5，12