一、單線程

（1）單線程的概念??

? 如果大家熟悉java，應該都知道，java是一門多線程語言，我們常常可以利用java的多線程處理各種各樣的事，比如說文件上傳，下載等，而JavaScript是否也可以支持多線程呢？

? 答案是否定的，JavaScript是一門單線程的語言，因此，JavaScript在同一個時間只能做一件事，單線程意味著，如果在同個時間有多個任務的話，這些任務就需要進行排隊，前一個任務執行完，才會執行下一個任務，比如說下面這段代碼

?

// 同步代碼 function fun1() {console.log(1); } function fun2() {console.log(2); } fun1(); fun2();// 輸出 1 2

??很容易可以看出，輸出會依次輸入1,2，因為代碼是從上到下依次執行，執行完fun1()，才繼續執行fun2()，但是如果fun1()中的代碼執行的是讀取文件或者ajax操作，文件的讀取和數據的獲取都需要一定時間，難道我們需要完全等到fun1()執行完才能繼續執行fun2()么？為了解決這個問題，后面我們會介紹同步和異步的概念

?

（2）為什么是單線程

? ? 其實，JavaScript的單線程，與它的用途是有很大關系，我們都知道，JavaScript作為瀏覽器的腳本語言，主要用來實現與用戶的交互，利用JavaScript，我們可以實現對DOM的各種各樣的操作，如果JavaScript是多線程的話，一個線程在一個DOM節點中增加內容，另一個線程要刪除這個DOM節點，那么這個DOM節點究竟是要增加內容還是刪除呢？這會帶來很復雜的同步問題，因此，JavaScript是單線程的

?

二、同步任務和異步任務

（1）為什么會有同步和異步

? ? 因為JavaScript的單線程，因此同個時間只能處理同個任務，所有任務都需要排隊，前一個任務執行完，才能繼續執行下一個任務，但是，如果前一個任務的執行時間很長，比如文件的讀取操作或ajax操作，后一個任務就不得不等著，拿ajax來說，當用戶向后臺獲取大量的數據時，不得不等到所有數據都獲取完畢才能進行下一步操作，用戶只能在那里干等著，嚴重影響用戶體驗

? ? 因此，JavaScript在設計的時候，就已經考慮到這個問題，主線程可以完全不用等待文件的讀取完畢或ajax的加載成功，可以先掛起處于等待中的任務，先運行排在后面的任務，等到文件的讀取或ajax有了結果后，再回過頭執行掛起的任務，因此，任務就可以分為同步任務和異步任務

?

（2）同步任務

? ? 同步任務是指在主線程上排隊執行的任務，只有前一個任務執行完畢，才能繼續執行下一個任務，當我們打開網站時，網站的渲染過程，比如元素的渲染，其實就是一個同步任務

?

（3）異步任務

? ? 異步任務是指不進入主線程，而進入任務隊列的任務，只有任務隊列通知主線程，某個異步任務可以執行了，該任務才會進入主線程，當我們打開網站時，像圖片的加載，音樂的加載，其實就是一個異步任務

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function?fun1() { ??console.log(1); } function?fun2() { ??console.log(2); } function?fun3() { ??console.log(3); } fun1(); setTimeout(function(){ ??fun2(); },0); fun3(); ? // 輸出 1 3 2

? ??有了異步，就算fun2()里面是文件的讀取或ajax這種需要耗時的任務，也不怕fun3()要等到fun2()執行完才能執行啦

?

（4）異步機制

? ? 那么，JavaScript中的異步是怎么實現的呢？那要需要說下回調和事件循環這兩個概念啦

? ? 首先要先說下任務隊列，我們在前面也介紹了，異步任務是不會進入主線程，而是會先進入任務隊列，任務隊列其實是一個先進先出的數據結構，也是一個事件隊列，比如說文件讀取操作，因為這是一個異步任務，因此該任務會被添加到任務隊列中，等到IO完成后，就會在任務隊列中添加一個事件，表示異步任務完成啦，可以進入執行棧啦~但是這時候呀，主線程不一定有空，當主線程處理完其它任務有空時，就會讀取任務隊列，讀取里面有哪些事件，排在前面的事件會被優先進行處理，如果該任務指定了回調函數，那么主線程在處理該事件時，就會執行回調函數中的代碼，也就是執行異步任務啦

? ? 單線程從從任務隊列中讀取任務是不斷循環的，每次棧被清空后，都會在任務隊列中讀取新的任務，如果沒有任務，就會等到，直到有新的任務，這就叫做任務循環，因為每個任務都是由一個事件觸發的，因此也叫作事件循環

? ?

總的來說，JavaScript的異步機制包括以下幾個步驟

（1）所有同步任務都在主線程上執行，行成一個執行棧 ；

（2）主線程之外，還存在一個任務隊列，只要異步任務有了結果，就會在任務隊列中放置一個事件 ；

（3）一旦執行棧中的所有同步任務執行完畢，系統就會讀取任務隊列，看看里面還有哪些事件，那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行 ；

（4）主線程不斷的重復上面的第三步；

?

三、異步編程

? ??那么，怎么才能實現異步編程，寫出性能更好的代碼呢，下面有幾種方式

（1）回調函數

? ? 回調函數是實現異步編程最簡單的方法啦，回調函數我們在使用ajax時應該用的很多啦，其實在使用ajax時，我們就用到了異步

1 2 3 4

var?req =?new?XMLHttpRequest(); req.open("GET",url); req.send(null); req.onreadystatechange=function(){}

?

? ??req.send（）方法是 AJAX ?向服務器發生數據，它是一個異步任務，而 req.onreadystatechange（）屬于事件回調，借由瀏覽器的HTTP請求線程發起對服務器的請求，在請求得到響應之后觸發請求完成事件，將回調函數推入事件隊列等待執行

? ? 其實像setTimeout，還有我們平時為元素綁定監聽事件，和上面說的道理也是一樣的

? ??回調函數的優點是簡單、容易理解和部署，缺點是不利于代碼的閱讀和維護，各個部分之間高度耦合（Coupling），流程會很混亂，而且每個任務只能指定一個回調函數

?

（2）Promise

? ??一直以來，JavaScript處理異步都是以callback的方式，在前端開發領域callback機制幾乎深入人心，近幾年隨著JavaScript開發模式的逐漸成熟，CommonJS規范順勢而生，其中就包括提出了Promise規范，Promise完全改變了js異步編程的寫法，讓異步編程變得十分的易于理解，同時Promise也已經納入了ES6，而且高版本的chrome、firefox瀏覽器都已經原生實現了Promise，只不過和現如今流行的類Promise類庫相比少些API

?

? ?Promise包括以下幾個規范

• 一個promise可能有三種狀態：等待（pending）、已完成（fulfilled）、已拒絕（rejected）
• 一個promise的狀態只可能從“等待”轉到“完成”態或者“拒絕”態，不能逆向轉換，同時“完成”態和“拒絕”態不能相互轉換
• promise必須實現then方法（可以說，then就是promise的核心），而且then必須返回一個promise，同一個promise的then可以調用多次，并且回調的執行順序跟它們被定義時的順序一致
• then方法接受兩個參數，第一個參數是成功時的回調，在promise由“等待”態轉換到“完成”態時調用，另一個是失敗時的回調，在promise由“等待”態轉換到“拒絕”態時調用，同時，then可以接受另一個promise傳入，也接受一個“類then”的對象或方法，即thenable對象

? ??在使用Promise時，我們需要檢測一些瀏覽器是否支持Promise

if(typeof(Promise)==="function") {console.log("支持"); } else {console.log("不支持"); }

我們可以使用new Promise進行Promise的創建

function wait(time) {return new Promise(function(resolve,reject) {setTimeout(resolve,time);}); }

??? 這個時候我們就可以使用Promise處理異步任務啦

wait(1000).then(function(){console.log(1); })

? ??上面這個例子表示1秒后輸出1，同樣的道理，我們可以使用Promise進行更加復雜的操作，關于更多的操作，就不繼續說啦，關于異步的實現，其實還有其它的一些方法，但是因為上面說的這兩種方法用的比較多，所以就只說上面這兩種了。

總結

以上是生活随笔為你收集整理的JS同步和异步问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。