使用Vue的nextTick引起的执行顺序之争

开端

在Vue中有一个nextTick方法，偶然一天，我发现无论代码的顺序如何，nextTick老是要比setTimeout先要执行。一样是排队，凭什么你nextTick就要比我快？

开局一道题，内容全靠编。（在node下运行，答案在文末给出。）

new Promise((resolve) => {
    console.log(1);
    
    process.nextTick(() => {
    	console.log(2);
    });
    
    resolve();
    
    process.nextTick(() => {
    	console.log(3);
    });
    
    console.log(4);
}).then(() => {
    console.log(5);
});

setTimeout(() => {
    console.log(6);
}, 0);

console.log(7);
复制代码

那么，打印的顺序究竟是什么呢？

事件循环

for(var i = 0; i < 5; i++){
    setTimeout(function after() {
        console.log(i);
    }, 0);
}
复制代码

这道题想必你们都见得不少了，答案脱口而出5个5。为何呢？ 答：闭包。 为何会产生闭包呢？ 答：。。。

这一切的一切都要从女娲补天开始提及（你咋不从盘古开天开始提及呢？）。

简单说明一下：

1. 通常js是从上往下执行的，执行的时候会被放在调用栈中（图中的Call Stack）。
2. 而后执行到了异步的事件（Ajax、定时器等），浏览器将做为Web api的一部分建立一个计时器，它将为你处理倒计时。
3. 时间到了以后就会进入到任务队列当中（Callback Queue）。
4. 事件循环从回调队列中获取函数，并将其推到调用堆栈。
5. 从第一步开始。

因此，即使是setTimeout(fn, 0)（实际上最小时间间隔是4ms）也是会从下一个事件周期开始执行。

上例中，因为after函数引用了i而且会在下一个事件周期中被调用，致使了i的内存没办法被释放，等下个周期再来，哼 生米都煮成稀饭了。i都被煮成5了。

关于内存，给你们推荐一篇我曾经翻译的一篇文章JavaScript是如何工做的：内存管理 + 如何处理4个常见的内存泄漏。 对理解闭包也很是有帮助。

这里我只是简单提了一下事件循环，更多的细节参考文末参考文献。

宏任务与微任务

一个宿主环境只有一个事件循环，但能够有多个任务队列。宏任务队列（macro task）与微任务队列（micro task）就是其中之二。

每次事件循环的时候，会先执行宏任务队列中的任务，而后再执行微任务队列中的任务。那么宏任务与微任务分别有哪些呢？

• 宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.
• 微任务：process.nextTick, Promise, Object.observer, MutationObserver.

new Promise((resolve) => {
    resolve();
}).then(() => {
    console.log(1);
});
setTimeout(() => {
    console.log(2);
}, 0);
console.log(3);
复制代码

按照上面的说法，应该打印出 三、二、1啊。但实际上却打印出了三、一、2。原来像process.nextTick和Promise这种微任务，都添加的当前循环的微任务队列之中。因此会比当前循环中的全部宏任务要后执行，会比下个循环中的宏任务要先执行。

process.nextTick 与 Promise

process.nextTick(() => {
    console.log(1); 
});
new Promise((resolve) => {
    resolve();
}).then(() => {
    console.log(2);
});
process.nextTick(() => {
    console.log(3); 
});
复制代码

为何我要把这两个同属于微任务的拎出来提一下呢？本身测试一下吧，由于结果大概会出乎你的意料。 why?

还好互联网是强大的。没有什么是百度不到的，若是有，那就google。

“process.nextTick 永远大于 promise.then，缘由其实很简单。。。在Node中，_tickCallback在每一次执行完TaskQueue中的一个任务后被调用，而这个_tickCallback中实质上干了两件事：

1. nextTickQueue中全部任务执行掉(长度最大1e4，Node版本v6.9.1)
2. 第一步执行完后执行_runMicrotasks函数，执行microtask中的部分(promise.then注册的回调)因此很明显process.nextTick > promise.then”

小姐

Vue中的nextTick是宏任务与微任务混合使用，须要手动切换。终于真相大白了。定时器：好吧 我就原谅你比我先吧。

那么开头题的答案是什么呢？仍是本身动手测试一下吧。

纸上得来终觉浅，觉知此事要躬行

咦，小姐？什么小姐？你说的是

我：滚，打错了而已。是小结。

我：什么？ 你请客！走啊走啊！

楼主被捕，完。

---

setImmediate

顺序之争还有一个奇怪的现象。

setImmediate(() => {
    console.log(1);
});

setTimeout(() => {
    console.log(2);
}, 0);
复制代码

然而你会发现，特么有时候打印一、2，有时候打印二、1。你为何像个女人同样啊。

nodejs官网给出的解释是：

• setImmediate(): 是被设计用来一旦当前阶段的任务执行完后执行。
• setTimeout(): 是让代码延迟执行。

若是没有在一个I/O周期执行，那么其执行顺序是不肯定的。

若是在一个I/O周期执行，setImmediate老是优先于setTimeout执行。

const fs = require('fs');

fs.readFile(__filename, () => {
    setTimeout(() => {
        console.log('timeout');
    }, 0);
    setImmediate(() => {
        console.log('immediate');
    });
});
复制代码

老是:先打印immediate再打印timeout。

---

参考文献：

1. 阮一峰老师的文章---JavaScript 运行机制详解：再谈Event Loop。（这篇文章有部分错误，建议每一个例子本身尝试，看看评论，查查资料。）
2. NodeJs官方文档---The Node.js Event Loop, Timers, and process.nextTick();
3. nextTick的优先级高于promise的答案在知乎的回答中找到---Promise的队列与setTimeout的队列有何关联？;
4. javascript是如何工做系列中的一篇文章---How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await) 的做用;
5. JavaScript 异步、栈、事件循环、任务队列