摘要：等到主任務隊列執(zhí)行完成時此時已打印，執(zhí)行存在隊列中的函數(shù)，任務隊列中引入了任務隊列來執(zhí)行的回調(diào)函數(shù)。在這個的回調(diào)函數(shù)中使用創(chuàng)建一個的任務，同時在中調(diào)用函數(shù)創(chuàng)建一個任務。

本文討論的事件循環(huán)均是基于瀏覽器環(huán)境上的，類似nodejs環(huán)境下的事件循環(huán)與此并不相同。

讀者首先要對js單線程事件循環(huán)機制以及Promise有基本理解；如果這兩個概念不是很清楚，建議先閱讀下面兩篇文章：

THE JAVASCRIPT EVENT LOOP?；?Promise 對象

本文是基于THE JAVASCRIPT EVENT LOOP?，并對其內(nèi)容的延伸，所以下面提到的概念都按這篇文章的來。首先我會總結(jié)一下?THE JAVASCRIPT EVENT LOOP?。OK，讓我們開始吧。

? ? ? 我們知道js單線程的實現(xiàn)方式會把異步任務（setTimeout回調(diào)函數(shù)，事件監(jiān)聽回調(diào)函數(shù)等）放在一個消息隊列中；當主任務隊列任務為空時會去message queue查詢是否有等待執(zhí)行的任務，如果有則執(zhí)行。

?例1：

var task_in_message_queue = () => {console.log("task in message queue")}
setTimeout(task_in_message_queue,0);
console.log("main task");

//result:
//main task
//task in message queue

setTimeout函數(shù)將task_in_message_queue函數(shù)添加到message queue隊列中。等到主任務隊列執(zhí)行完成時（此時已打印main task），執(zhí)行存在message queue隊列中的task_in_message_queue函數(shù)

? ? ? ? ES6中引入了任務隊列來執(zhí)行Promise的回調(diào)函數(shù)。同message queue一樣，job queue中的任務也是在主任務隊列為空時才開始執(zhí)行。

例2：

var promise = new Promise((resolve,reject) => {
    resolve("task in job queue");
});
var resolve_callback = (resolve_message) => {console.log(resolve_message)}
promise.then(resolve_callback);
console.log("main task");

//result:
//main task
//task in job queue

/**
這里有一個有趣的現(xiàn)象

在chrome中打印出的結(jié)果是
main task
task in job queue
undefined  //主任務的函數(shù)返回值

在firefox中的結(jié)果是
main task 
undefined  //主任務的函數(shù)返回值
task in job queue

感覺v8的實現(xiàn)是把job queue整合到了主任務隊列尾部
**/

promise.then 將promise?fulfilled狀態(tài)下的回調(diào)函數(shù)resolve_callback添加到job queue中。等到主任務隊列執(zhí)行完成時（此時已打印main task），執(zhí)行存在job queue隊列中的resolve_callback函數(shù)

這里有一點需要注意的是promise構造函數(shù)會在主任務中立即執(zhí)行，例子如下：

var promise = new Promise((resolve,reject) => {
    resolve("task in job queue");
    console.log("the promise construction executed");
});
var resolve_callback = (resolve_message) => {console.log(resolve_message)}
promise.then(resolve_callback);
console.log("main task");


//result:
//the promise construction executed
//main task
//task in job queue

? ? ? ?通過上面的例子我們知道主任務隊列優(yōu)先級是最高的，那么job queue和message queue哪個優(yōu)先級更高呢？答案是job queue，js會將job queue中的任務完全執(zhí)行完之后再執(zhí)行message queue中的任務。例子如下：

var message_task = () => {console.log("message task");}
setTimeout(message_task,0);
var promise1 = new Promise((resolve,reject) => {
    resolve("promise 1 resolved");
});
var promise2 = new Promise((resolve,reject) => {
    resolve("promise 2 resolved");
});
var resolve_callback = (resolve_message) => {console.log(resolve_message)}
promise1.then(resolve_callback);
promise2.then(resolve_callback);
console.log("main task");


//result:
//main task
//promise 1 resolved
//promise 2 resolved
//message task

/**
這里chrome和firefox返回undefined的位置同上面的例子一樣，也是不同的。有興趣的話可以試試看一下。
**/

? ? ? ? 現(xiàn)在我們知道job queue的優(yōu)先級高于message queue。那么每次執(zhí)行message queue中任務前會檢查job queue嗎？我的意思是如果當前job queue為空，message queue中有多個任務（假設有m_task1和m_task2）。js開始執(zhí)行message queue中的任務，在執(zhí)行完m_task1時插入了一個j_task1在job queue中。那么接下來是先執(zhí)行m_task2呢還是j_task1呢？如果先執(zhí)行了m_task2的話，就說明js一旦開始執(zhí)行message queue中的任務就會將所有message queue中任務執(zhí)行完再檢查其它任務隊列。如果先執(zhí)行j_task1的話，那么說明再執(zhí)行每個message queue中的任務前都會先檢查其它任務隊列，先執(zhí)行優(yōu)先級高的任務隊列中的任務。為此我們用如下代碼來檢驗：

var promise_task = new Promise((resolve,reject) => {
    resolve("j_task1");
});
var resolve_callback = (resolve_message) => {console.log(resolve_message)}
var message_task1 = () => {
    promise_task.then(resolve_callback);
    console.log("m_task1");
}
var message_task2 = () => {console.log("m_task2");}
setTimeout(message_task1,0);
setTimeout(message_task2,0);


//result:
//m_task1
//j_task1
//m_task2

事實證明js在每次執(zhí)行message queue中的任務前都會檢查其它任務隊列（至少會檢查job queue），根據(jù)隊列優(yōu)先級決定先執(zhí)行哪個隊列中的任務。

? ? ? ? 上面我們了解了job queue和message queue中任務的執(zhí)行順序，簡而言之：在每次一個任務結(jié)束時，js都會根據(jù)任務隊列的優(yōu)先級判斷下一個執(zhí)行任務是哪個。如果job queue中有任務則執(zhí)行job queue中的第一個任務，否則執(zhí)行message queue中的第一個任務。那么主任務隊列是不是也一樣呢？（邏輯上應該是一樣的，否則job queue或者message queue中的任務可以遞歸創(chuàng)建新任務，這樣就永遠無法回到主任務隊列了）。

? ? ? ? 即每次選擇執(zhí)行任務前（或者每次任務結(jié)束后），js會根據(jù)主任務隊列，job queue，message queue的優(yōu)先級來挑選將要執(zhí)行下一個任務是哪個。

? ? ? ? 為此我們聲明一個promise和一個message_task函數(shù)。在這個promise的回調(diào)函數(shù)中使用setTimeout創(chuàng)建一個message_task的message queue任務，同時在message_task中調(diào)用promise.then 函數(shù)創(chuàng)建一個job queue 任務。這樣兩個任務會循環(huán)創(chuàng)建并循環(huán)執(zhí)行。運行后我們會在console中看到兩個任務循環(huán)打印，這是我們在console中鍵入alert("stop")命令。如果頁面顯示了alert，console停止了打印就說明主任務隊列的行為方式和job queue，message queue是一樣的。否則的話，在這種情況下我們將永遠無法回到主任務隊列。驗證代碼如下：

var promise_task = new Promise((resolve,reject) => {
    resolve("j_task");
});
var resolve_callback = (resolve_message) => {
    setTimeout(message_task,0);
    console.log(resolve_message);
}
var message_task = () => {
    promise_task.then(resolve_callback);
    console.log("m_task");
}

promise_task.then(resolve_callback);


//result:
//console會循環(huán)打印 j_task 和 m_task
//這是在console中鍵入alert("stop")命令，觀察是否彈出alert框，console中打印是否終止

希望大家自行求證一下，當然驗證完畢后記得刷新頁面，不然可能就崩了。另：最好在chrome下驗證，firefox有些卡頓。

? ? ? ? js事件循環(huán)規(guī)律可大致總結(jié)為如下：

? ? ? ? 1，js中有三個任務隊列：主任務隊列，job queue，message queue；

? ? ? ? 2，它們的優(yōu)先級是：主任務隊列 > job queue > message queue；

? ? ? ? 3，每當要執(zhí)行下一個任務前（或者一個任務完成后），js會根據(jù)優(yōu)先級詢問各個任務隊列是否為空，一旦遇到非空任務隊列時則取其第一個任務執(zhí)行。