本文介紹了詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的執(zhí)行順序，分享給大家，具體如下：

10余年的永和網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整永和建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“永和網(wǎng)站設(shè)計(jì)”,“永和網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

先舉一個(gè)比較典型的例子：

setImmediate(function(){
  console.log(1);
},0);
setTimeout(function(){
  console.log(2);
},0);
new Promise(function(resolve){
  console.log(3);
  resolve();
  console.log(4);
}).then(function(){
  console.log(5);
});
console.log(6);
process.nextTick(function(){
  console.log(7);
});
console.log(8);

這段代碼輸出的正確順序是什么？

答案是：

3 4 6 8 7 5 2 1

在解釋輸出結(jié)果之前，我們來(lái)看幾個(gè)概念：

macro-task: script (整體代碼)，setTimeout, setInterval, setImmediate, I/O, UI rendering.

micro-task: process.nextTick, Promise(原生)，Object.observe，MutationObserver

第一步.script整體代碼被執(zhí)行，執(zhí)行過(guò)程為

• 創(chuàng)建setImmediate macro-task
• 創(chuàng)建setTimeout macro-task
• 創(chuàng)建micro-task Promise.then 的回調(diào)，并執(zhí)行script console.log(3); resolve(); console.log(4); 此時(shí)輸出3和4，雖然resolve調(diào)用了，執(zhí)行了但是整體代碼還沒(méi)執(zhí)行完，無(wú)法進(jìn)入Promise.then 流程。
• console.log(6)輸出6
• process.nextTick 創(chuàng)建micro-task
• console.log(8) 輸出8
• 第一個(gè)過(guò)程過(guò)后，已經(jīng)輸出了3 4 6 8

第二步.由于其他micro-task 的 優(yōu)先級(jí)高于macro-task。

此時(shí)micro-task 中有兩個(gè)任務(wù)按照優(yōu)先級(jí)process.nextTick 高于 Promise。

所以先輸出7，再輸出5

第三步，micro-task 任務(wù)列表已經(jīng)執(zhí)行完畢，家下來(lái)執(zhí)行macro-task. 由于setTimeout的優(yōu)先級(jí)高于setIImmediate，所以先輸出2，再輸出1。

整個(gè)過(guò)程描述起來(lái)像是同步操作，實(shí)際上是基于Event Loop的事件循環(huán)

關(guān)于micro-task和macro-task的執(zhí)行順序，可看下面這個(gè)例子(來(lái)自《深入淺出Node.js》)：

//加入兩個(gè)nextTick的回調(diào)函數(shù)
process.nextTick(function () {
  console.log('nextTick延遲執(zhí)行1');
});
process.nextTick(function () { 
  console.log('nextTick延遲執(zhí)行2');
});
// 加入兩個(gè)setImmediate()的回調(diào)函數(shù)
setImmediate(function () {
  console.log('setImmediate延遲執(zhí)行1'); 
  // 進(jìn)入下次循環(huán) 
  process.nextTick(function () {
    console.log('強(qiáng)勢(shì)插入');
  });
});
setImmediate(function () {
  console.log('setImmediate延遲執(zhí)行2'); 
});

console.log('正常執(zhí)行');

運(yùn)行這段代碼,結(jié)果是這樣：

正常執(zhí)行
nextTick延遲執(zhí)行1
nextTick延遲執(zhí)行2
setImmediate延遲執(zhí)行1
setImmediate延遲執(zhí)行2
強(qiáng)勢(shì)插入

在新版的Node中，process.nextTick執(zhí)行完后，會(huì)循環(huán)遍歷setImmediate，將setImmediate都執(zhí)行完畢后再跳出循環(huán)。所以?xún)蓚€(gè)setImmediate執(zhí)行完后隊(duì)列里只剩下第一個(gè)setImmediate里的process.nextTick。最后輸出”強(qiáng)勢(shì)插入”。

關(guān)于優(yōu)先級(jí)的另一個(gè)比較清晰的版本：

觀察者優(yōu)先級(jí)

在每次輪訓(xùn)檢查中，各觀察者的優(yōu)先級(jí)分別是：

idle觀察者 > I/O觀察者 > check觀察者。

idle觀察者：process.nextTick

I/O觀察者：一般性的I/O回調(diào)，如網(wǎng)絡(luò)，文件，數(shù)據(jù)庫(kù)I/O等

check觀察者：setTimeout>setImmediate

總結(jié)

• 同步代碼執(zhí)行順序優(yōu)先級(jí)高于異步代碼執(zhí)行順序優(yōu)先級(jí)；
• new Promise(fn)中的fn是同步執(zhí)行；
• process.nextTick()>Promise.then()>setTimeout>setImmediate。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。