關於JavaScript同步與非同步程式設計實例用法-js教程-PHP中文網

如果你有志於成為優秀的前端工程師，或是想要深入學習JavaScript，非同步程式設計是不可或缺的知識點，這也是區分初級，中級或高階前端的依據之一。如果你對非同步程式設計沒有太清晰的概念，那麼我建議你花點時間學習JavaScript非同步編程，如果你對非同步程式有自己的獨特理解，也歡迎閱讀本文，一起交流。

同步與非同步

介紹非同步之前，回顧一下，所謂同步編程，就是電腦一行一行依序執行程式碼，目前程式碼任務耗時執行會阻塞後續程式碼的執行。

同步編程，也就是典型的請求-回應模型，當請求呼叫函數或方法後，需等待其回應返回，然後執行後續程式碼。

一般情況下，同步編程，代碼按順序依次執行，能很好的保證程序的執行，但是在某些場景下，比如讀取文件內容，或請求伺服器接口數據，需要根據返回的資料內容執行後續操作，讀取檔案和請求介面直到資料返回這一過程是需要時間的，網路越差，耗費時間越長，如果按照同步程式設計方式實現，在等待資料返回這段時間，JavaScript是不能處理其他任務的，此時頁面的交互，滾動等任何操作也會被阻塞，這顯然是及其不友好，不可接受的，而這正是需要異步編程大顯身手的場景，如下圖，耗時任務A會阻塞任務B的執行，等到任務A執行完才能繼續執行B：

關於JavaScript同步與非同步程式設計實例用法

當使用非同步程式設計時，在等待目前任務的回應返回之前，可以繼續執行後續程式碼，即目前執行任務不會阻塞後續執行。

非同步編程，不同於同步編程的請求-回應模式，其是一種事件驅動編程，請求呼叫函數或方法後，無需立即等待回應，可以繼續執行其他任務，而之前任務回應返回後可以透過狀態、通知和回呼來通知呼叫者。

多執行緒

前面說明了非同步程式設計能很好的解決同步程式阻塞的問題，那麼實現非同步的方式有哪些呢？通常實現非同步方式是多線程，如C#, 即同時開啟多個線程，不同操作能並行執行，如下圖，耗時任務A執行的同時，在線程二中任務B也可以執行：

關於JavaScript同步與非同步程式設計實例用法

JavaScript單執行緒

JavaScript語言執行環境是單執行緒的，單執行緒在程式執行時，所走的程式路徑依照連續順序排下來，前面的必須處理好，後面的才會執行，而使用非同步實作時，多個任務可以並發執行。那麼JavaScript的非同步程式設計如何實現呢，下一節將詳細闡述其非同步機制。

並行與並發

前文提到多執行緒的任務可以並行執行，而JavaScript單執行緒非同步程式設計可以實現多任務並發執行，這裡有必要說明一下並行與並發的差異。

並行，指同一時刻內多任務同時進行；
並發，指在同一時間段內，多任務同時進行著，但是某一時刻，只有某一任務執行；

通常所說的並發連接數，是指瀏覽器向伺服器發起請求，建立TCP連接，每秒鐘伺服器建立的總連接數，而假如，伺服器處10ms能處理一個連接，那麼其並發連接數就是100。

JavaScript非同步機制

本節介紹JavaScript非同步機制，首先來看一個範例：

    for (var i = 0; i < 5; i ++) {
        setTimeout(function(){
            console.log(i);
        }, 0);
    }
    console.log(i);
    //5 ; 5 ; 5 ; 5; 5

登入後複製

應該要明白最後輸出的全是5：

i在此處是for迴圈所在上下文環境的變量，有且只有一個i;
#循環結束時i==5;
#JavaScript單執行緒事件處理器在執行緒空閒前不會執行下一事件。

如上第三個所述，如果要真正理解上述範例中的setTimeout()，以及JavaScript非同步機制，就需要理解JavaScript的事件循環和並發模型。

並發模型（Concurrency model）

目前，我們已經知道，JavaScript執行非同步任務時，不需要等待回應返回，可以繼續執行其他任務，而在回應返回時，會得到通知，執行回調或事件處理程序。那麼這一切具體是如何完成的，又以什麼規則或順序運作呢？接下來我們需要解答這個問題。

註：回呼和事件處理程序本質上並無差別，只是在不同情況下，不同的叫法。

前文已經提到，JavaScript非同步程式設計使得多個任務可以並發執行，而實現這項功能的基礎是JavScript擁有一個基於事件循環的並發模型。

堆疊與佇列

介紹JavaScript並發模型之前，先簡單介紹堆疊與佇列的差異：

堆疊（heap）：記憶體中某一未被阻止的區域，通常儲存物件（引用類型）；
堆疊（stack）：後進先出的順序儲存資料結構，通常儲存函數參數和基本類型值變量（按值存取）；
佇列（queue）：先進先出順序儲存資料結構。

事件循環（Event Loop）

JavaScript引擎負責解析，執行JavaScript程式碼，但它並不能單獨運行，通常都得有一個宿主環境，一般如瀏覽器或Node伺服器，前文說到的單線程是指在這些宿主環境中創建單一線程，提供一種機制，調用JavaScript引擎完成多個JavaScript程式碼區塊的調度，執行（是的，JavaScript程式碼都是按塊執行的），這種機制就稱為事件循環（Event Loop）。

注：这里的事件与DOM事件不要混淆，可以说这里的事件包括DOM事件，所有异步操作都是一个事件，诸如ajax请求就可以看作一个request请求事件。

JavaScript执行环境中存在的两个结构需要了解：

消息队列(message queue)，也叫任务队列（task queue）：存储待处理消息及对应的回调函数或事件处理程序；
执行栈(execution context stack)，也可以叫执行上下文栈：JavaScript执行栈，顾名思义，是由执行上下文组成，当函数调用时，创建并插入一个执行上下文，通常称为执行栈帧（frame），存储着函数参数和局部变量，当该函数执行结束时，弹出该执行栈帧；

注：关于全局代码，由于所有的代码都是在全局上下文执行，所以执行栈顶总是全局上下文就很容易理解，直到所有代码执行完毕，全局上下文退出执行栈，栈清空了；也即是全局上下文是第一个入栈，最后一个出栈。

任务

分析事件循环流程前，先阐述两个概念，有助于理解事件循环：同步任务和异步任务。

任务很好理解，JavaScript代码执行就是在完成任务，所谓任务就是一个函数或一个代码块，通常以功能或目的划分，比如完成一次加法计算，完成一次ajax请求；很自然的就分为同步任务和异步任务。同步任务是连续的，阻塞的；而异步任务则是不连续，非阻塞的，包含异步事件及其回调，当我们谈及执行异步任务时，通常指执行其回调函数。

事件循环流程

关于事件循环流程分解如下：

宿主环境为JavaScript创建线程时，会创建堆(heap)和栈(stack)，堆内存储JavaScript对象，栈内存储执行上下文；
栈内执行上下文的同步任务按序执行，执行完即退栈，而当异步任务执行时，该异步任务进入等待状态（不入栈），同时通知线程：当触发该事件时（或该异步操作响应返回时），需向消息队列插入一个事件消息；
当事件触发或响应返回时，线程向消息队列插入该事件消息（包含事件及回调）；
当栈内同步任务执行完毕后，线程从消息队列取出一个事件消息，其对应异步任务（函数）入栈，执行回调函数，如果未绑定回调，这个消息会被丢弃，执行完任务后退栈；
当线程空闲（即执行栈清空）时继续拉取消息队列下一轮消息（next tick，事件循环流转一次称为一次tick）。

使用代码可以描述如下：

    var eventLoop = [];    var event;    var i = eventLoop.length - 1; // 后进先出

    while(eventLoop[i]) {        event = eventLoop[i--]; 
        if (event) { // 事件回调存在
            event();
        }        // 否则事件消息被丢弃
    }

登入後複製

这里注意的一点是等待下一个事件消息的过程是同步的。

并发模型与事件循环

    var ele = document.querySelector(&#39;body&#39;);    function clickCb(event) {        console.log(&#39;clicked&#39;);
    }    function bindEvent(callback) {
        ele.addEventListener(&#39;click&#39;, callback);
    }    

    bindEvent(clickCb);

登入後複製

针对如上代码我们可以构建如下并发模型：

關於JavaScript同步與非同步程式設計實例用法

如上图，当执行栈同步代码块依次执行完直到遇见异步任务时，异步任务进入等待状态，通知线程，异步事件触发时，往消息队列插入一条事件消息；而当执行栈后续同步代码执行完后，读取消息队列，得到一条消息，然后将该消息对应的异步任务入栈，执行回调函数；一次事件循环就完成了，也即处理了一个异步任务。

再谈關於JavaScript同步與非同步程式設計實例用法

了解了JavaScript事件循环后我们再看前文关于關於JavaScript同步與非同步程式設計實例用法的例子就比较清晰了：

關於JavaScript同步與非同步程式設計實例用法所表达的意思是：等待0秒后（这个时间由第二个参数值确定），往消息队列插入一条定时器事件消息，并将其第一个参数作为回调函数；而当执行栈内同步任务执行完毕时，线程从消息队列读取消息，将该异步任务入栈，执行；线程空闲时再次从消息队列读取消息。

再看一个实例：

    var start = +new Date();    var arr = [];

    setTimeout(function(){        console.log(&#39;time: &#39; + (new Date().getTime() - start));
    },10);    for(var i=0;i<=1000000;i++){
        arr.push(i);
    }

登入後複製

执行多次输出如下：

關於JavaScript同步與非同步程式設計實例用法

在setTimeout异步回调函数里我们输出了异步任务注册到执行的时间，发现并不等于我们指定的时间，而且两次时间间隔也都不同，考虑以下两点：

在读取消息队列的消息时，得等同步任务完成，这个是需要耗费时间的；
消息队列先进先出原则，读取此异步事件消息之前，可能还存在其他消息，执行也需要耗时；

所以异步执行时间不精确是必然的，所以我们有必要明白无论是同步任务还是异步任务，都不应该耗时太长，当一个消息耗时太长时，应该尽可能的将其分割成多个消息。

Web Workers

每个Web Worker或一个跨域的iframe都有各自的堆栈和消息队列，这些不同的文档只能通过postMessage方法进行通信，当一方监听了message事件后，另一方才能通过该方法向其发送消息，这个message事件也是异步的，当一方接收到另一方通过postMessage方法发送来的消息后，会向自己的消息队列插入一条消息，而后续的并发流程依然如上文所述。