摘要：等到主任務隊列執行完成時此時已打印，執行存在隊列中的函數，任務隊列中引入了任務隊列來執行的回調函數。在這個的回調函數中使用創建一個的任務，同時在中調用函數創建一個任務。

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

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

THE JAVASCRIPT EVENT LOOP?；?Promise 對象

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

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

?例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函數將task_in_message_queue函數添加到message queue隊列中。等到主任務隊列執行完成時（此時已打印main task），執行存在message queue隊列中的task_in_message_queue函數

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

例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

/**
這里有一個有趣的現象

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

在firefox中的結果是
main task 
undefined  //主任務的函數返回值
task in job queue

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

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

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

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

? ? ? ?通過上面的例子我們知道主任務隊列優先級是最高的，那么job queue和message queue哪個優先級更高呢？答案是job queue，js會將job queue中的任務完全執行完之后再執行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的位置同上面的例子一樣，也是不同的。有興趣的話可以試試看一下。
**/

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

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在每次執行message queue中的任務前都會檢查其它任務隊列（至少會檢查job queue），根據隊列優先級決定先執行哪個隊列中的任務。

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

? ? ? ? 即每次選擇執行任務前（或者每次任務結束后），js會根據主任務隊列，job queue，message queue的優先級來挑選將要執行下一個任務是哪個。

? ? ? ? 為此我們聲明一個promise和一個message_task函數。在這個promise的回調函數中使用setTimeout創建一個message_task的message queue任務，同時在message_task中調用promise.then 函數創建一個job queue 任務。這樣兩個任務會循環創建并循環執行。運行后我們會在console中看到兩個任務循環打印，這是我們在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會循環打印 j_task 和 m_task
//這是在console中鍵入alert("stop")命令，觀察是否彈出alert框，console中打印是否終止

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

? ? ? ? js事件循環規律可大致總結為如下：

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

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

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