摘要：令人困惑的是，文檔中稱，指定的回調(diào)函數(shù)，總是排在前面。另外，由于指定的回調(diào)函數(shù)是在本次事件循環(huán)觸發(fā)，而指定的是在下次事件循環(huán)觸發(fā)，所以很顯然，前者總是比后者發(fā)生得早，而且執(zhí)行效率也高因?yàn)椴挥脵z查任務(wù)隊(duì)列。

除了放置異步任務(wù)的事件，"任務(wù)隊(duì)列"還可以放置定時(shí)事件，即指定某些代碼在多少時(shí)間之后執(zhí)行。這叫做"定時(shí)器"（timer）功能，也就是定時(shí)執(zhí)行的代碼。

定時(shí)器功能主要由setTimeout()和setInterval()這兩個(gè)函數(shù)來完成，它們的內(nèi)部運(yùn)行機(jī)制完全一樣，區(qū)別在于前者指定的代碼是一次性執(zhí)行，后者則為反復(fù)執(zhí)行。以下主要討論setTimeout()。

setTimeout()接受兩個(gè)參數(shù)，第一個(gè)是回調(diào)函數(shù)，第二個(gè)是推遲執(zhí)行的毫秒數(shù)。

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

上面代碼的執(zhí)行結(jié)果是1，3，2，因?yàn)閟etTimeout()將第二行推遲到1000毫秒之后執(zhí)行。

如果將setTimeout()的第二個(gè)參數(shù)設(shè)為0，就表示當(dāng)前代碼執(zhí)行完（執(zhí)行棧清空）以后，立即執(zhí)行（0毫秒間隔）指定的回調(diào)函數(shù)。

setTimeout(function(){console.log(1);}, 0);
console.log(2);

上面代碼的執(zhí)行結(jié)果總是2，1，因?yàn)橹挥性趫?zhí)行完第二行以后，系統(tǒng)才會(huì)去執(zhí)行"任務(wù)隊(duì)列"中的回調(diào)函數(shù)。

總之，setTimeout(fn,0)的含義是，指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行，也就是說，盡可能早得執(zhí)行。它在"任務(wù)隊(duì)列"的尾部添加一個(gè)事件，因此要等到同步任務(wù)和"任務(wù)隊(duì)列"現(xiàn)有的事件都處理完，才會(huì)得到執(zhí)行。

HTML5標(biāo)準(zhǔn)規(guī)定了setTimeout()的第二個(gè)參數(shù)的最小值（最短間隔），不得低于4毫秒，如果低于這個(gè)值，就會(huì)自動(dòng)增加。在此之前，老版本的瀏覽器都將最短間隔設(shè)為10毫秒。另外，對(duì)于那些DOM的變動(dòng)（尤其是涉及頁面重新渲染的部分），通常不會(huì)立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時(shí)使用requestAnimationFrame()的效果要好于setTimeout()。

需要注意的是，setTimeout()只是將事件插入了"任務(wù)隊(duì)列"，必須等到當(dāng)前代碼（執(zhí)行棧）執(zhí)行完，主線程才會(huì)去執(zhí)行它指定的回調(diào)函數(shù)。要是當(dāng)前代碼耗時(shí)很長(zhǎng)，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會(huì)在setTimeout()指定的時(shí)間執(zhí)行。

Node.js也是單線程的Event Loop，但是它的運(yùn)行機(jī)制不同于瀏覽器環(huán)境。
這里需要注意一下，node新加了一個(gè)微任務(wù)(process.nextTick)和一個(gè)宏任務(wù)(setImmediate)
簡(jiǎn)單的來說，就是node在處理一個(gè)執(zhí)行隊(duì)列的時(shí)候不管怎樣都會(huì)先執(zhí)行完當(dāng)前隊(duì)列，然后再清空微任務(wù)隊(duì)列，再去執(zhí)行下一個(gè)隊(duì)列。

請(qǐng)看下面的示意圖（作者@BusyRich）。

根據(jù)上圖，Node.js的運(yùn)行機(jī)制如下。

（1）V8引擎解析JavaScript腳本。

（2）解析后的代碼，調(diào)用Node API。

（3）libuv庫負(fù)責(zé)Node API的執(zhí)行。它將不同的任務(wù)分配給不同的線程，形成一個(gè)Event Loop（事件循環(huán)），以異步的方式將任務(wù)的執(zhí)行結(jié)果返回給V8引擎。

（4）V8引擎再將結(jié)果返回給用戶。

除了setTimeout和setInterval這兩個(gè)方法，Node.js還提供了另外兩個(gè)與"任務(wù)隊(duì)列"有關(guān)的方法：process.nextTick和setImmediate。它們可以幫助我們加深對(duì)"任務(wù)隊(duì)列"的理解。

process.nextTick方法可以在當(dāng)前"執(zhí)行棧"的尾部----下一次Event Loop（主線程讀取"任務(wù)隊(duì)列"）之前----觸發(fā)回調(diào)函數(shù)。也就是說，它指定的任務(wù)總是發(fā)生在所有異步任務(wù)之前。setImmediate方法則是在當(dāng)前"任務(wù)隊(duì)列"的尾部添加事件，也就是說，它指定的任務(wù)總是在下一次Event Loop時(shí)執(zhí)行，這與setTimeout(fn, 0)很像。請(qǐng)看下面的例子（via StackOverflow）。

process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log("TIMEOUT FIRED");
}, 0)
// 1
// 2
// TIMEOUT FIRED

上面代碼中，由于process.nextTick方法指定的回調(diào)函數(shù)，總是在當(dāng)前"執(zhí)行棧"的尾部觸發(fā)，所以不僅函數(shù)A比setTimeout指定的回調(diào)函數(shù)timeout先執(zhí)行，而且函數(shù)B也比timeout先執(zhí)行。這說明，如果有多個(gè)process.nextTick語句（不管它們是否嵌套），將全部在當(dāng)前"執(zhí)行棧"執(zhí)行。

現(xiàn)在，再看setImmediate。

setImmediate(function A() {
  console.log(1);
  setImmediate(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log("TIMEOUT FIRED");
}, 0);

上面代碼中，setImmediate與setTimeout(fn,0)各自添加了一個(gè)回調(diào)函數(shù)A和timeout，都是在下一次Event Loop觸發(fā)。那么，哪個(gè)回調(diào)函數(shù)先執(zhí)行呢？答案是不確定。運(yùn)行結(jié)果可能是1--TIMEOUT FIRED--2，也可能是TIMEOUT FIRED--1--2。

令人困惑的是，Node.js文檔中稱，setImmediate指定的回調(diào)函數(shù)，總是排在setTimeout前面。實(shí)際上，這種情況只發(fā)生在遞歸調(diào)用的時(shí)候。

setImmediate(function (){
  setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){console.log(2);});
  });

  setTimeout(function timeout() {
    console.log("TIMEOUT FIRED");
  }, 0);
});
// 1
// TIMEOUT FIRED
// 2

上面代碼中，setImmediate和setTimeout被封裝在一個(gè)setImmediate里面，它的運(yùn)行結(jié)果總是1--TIMEOUT FIRED--2，這時(shí)函數(shù)A一定在timeout前面觸發(fā)。至于2排在TIMEOUT FIRED的后面（即函數(shù)B在timeout后面觸發(fā)），是因?yàn)閟etImmediate總是將事件注冊(cè)到下一輪Event Loop，所以函數(shù)A和timeout是在同一輪Loop執(zhí)行，而函數(shù)B在下一輪Loop執(zhí)行。

我們由此得到了process.nextTick和setImmediate的一個(gè)重要區(qū)別：多個(gè)process.nextTick語句總是在當(dāng)前"執(zhí)行棧"一次執(zhí)行完，多個(gè)setImmediate可能則需要多次loop才能執(zhí)行完。事實(shí)上，這正是Node.js 10.0版添加setImmediate方法的原因，否則像下面這樣的遞歸調(diào)用process.nextTick，將會(huì)沒完沒了，主線程根本不會(huì)去讀取"事件隊(duì)列"！

process.nextTick(function foo() {
  process.nextTick(foo);
});

事實(shí)上，現(xiàn)在要是你寫出遞歸的process.nextTick，Node.js會(huì)拋出一個(gè)警告，要求你改成setImmediate。

另外，由于process.nextTick指定的回調(diào)函數(shù)是在本次"事件循環(huán)"觸發(fā)，而setImmediate指定的是在下次"事件循環(huán)"觸發(fā)，所以很顯然，前者總是比后者發(fā)生得早，而且執(zhí)行效率也高（因?yàn)椴挥脵z查"任務(wù)隊(duì)列"）。

最后注意一下，微任務(wù)中process.nextTick比promise.then快

如果你覺得這篇文章對(duì)你有所幫助，那就順便點(diǎn)個(gè)贊吧，點(diǎn)點(diǎn)關(guān)注不迷路~

黑芝麻哇，白芝麻發(fā)，黑芝麻白芝麻哇發(fā)哈！

前端哇發(fā)哈