談談你是如何理解js異步編程的（js異步編程的四種方法）

本文目錄一覽：

• 1、我對JS異步執行機制的理解
• 2、js的同步、異步是指什麼？怎麼回事？與線程有關嗎？
• 3、javascript同步和異步的區別與實現方式
• 4、js異步是什麼意思，怎麼理解js異步思想呢？

我對JS異步執行機制的理解

說起JS的異步執行機制，如果百度一下，你首先會發現阮一峰的寫過一篇關於異步機制的文章（ ），等你津津有味又一頭霧水的看完，然後繼續看百度的其他結果，然後會發現，阮一峰的這篇被另一個大牛朴靈給批判了

（ ）。

由此可見，關於異步執行機制到底是怎麼回事，因為涉及到瀏覽器底層機制，所以不容易徹底了解清楚，就算是大牛阮一峰，也只是通過英文文獻來了解，而且一知半解。我的這篇文章只是試圖儘可能簡單的描述一下JS的異步執行機制，坦白說，我現在並不能完全弄懂這個機制，所以也不能完全解釋清這個機制，所以，如果我寫的越嚴謹，就越容易出錯，我只能簡單但是較模糊的描述一下：

JS的運行環境是一個很複雜的環境，它裡面有非常多的複雜的名詞事物，用簡單又不嚴謹的說法來說，運行環境里至少有下面這些事物：

有一個國外的web app，專門用來講解異步事件的門道 Loupe ，這個更接近真實情況。為什麼我不講解這個？因為更複雜了，我們並不打算研究瀏覽器的底層，不是么？

然後說一下任務隊列里的任務。所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，靠主線程自己就可以執行完成的任務；異步任務指的是，主線程執行開始之後，需要靠主線程之外的線程才能完成的任務。由主線程決定是否要動用其他線程。以下內容，不再提棧，只說主線程。

現在說重點：

異步任務的執行機制是：

當主線程遇到一個異步任務，比如一個ajax請求，當主線程執行到 xhr.send() 的時候，這個send命令是立即執行的， 並不會像一些人想象的，拖到所有同步任務的最後面。 然後主線程向http線程發送指令，要求http線程向服務器發送請求。這裡強調一下http線程，顯然它不是主線程的一部分，因為它可以並發，如果你有100個ajax請求，每個都需要1秒鐘，是不是http線程要花100秒呢？並不是，它會並發100個請求，總共耗時大約1.01秒就完成了。

主線程向以http線程為代表的幾個線程發送指令之後，主線程就暫時不再管這個ajax任務了，而是去看任務隊列里的下一個任務。

http線程發送了請求之後接收反饋，收到之後，形成一個新的事件（可以叫做“我收到啦！”事件），然後插入到回調函數隊列中，因為回調函數隊列的優先級很低，所以會排到總隊列的最後面，其結果就是：主線程把同步任務都完成了，才開始執行異步事件的 回調 。 注意，並不是異步任務在全體同步任務結束之後才開始，而是異步任務的回調通常在全體同步任務結束之後才開始！異步任務跟異步任務的回調是兩回事！是兩個任務！一個鮮明的例子就是 setTimeout(fn, 1000) ，計時是從主線程遇到 setTimeout() 任務，然後分配給計時器線程，計時器線程開始幹活的時候就開始計時了！只不過要1秒之後 fn 才執行！ setTimeout() 和 fn 是兩個任務！ setTimeout() 是立即執行， fn 才是1秒之後執行。但是 setTimeout() 的執行，人眼是感受不到的，因為並沒有什麼地方有一個秒錶告訴你 setTimeout() 開始執行了；而fn的執行，人眼能感受到，所以人們會錯誤的以為fn才是異步任務，其實fn並不是， fn 是個回調任務，往往 fn 是同步任務，比如 fn 可能是 console.log(123) ，這怎麼會是異步任務。

所以，異步機制是瀏覽器的兩個或以上常駐線程共同完成的，異步請求是JS主線程和其他某個線程共同完成的，JS的執行線程發起異步請求（這時瀏覽器會開一條新的HTTP請求線程來執行請求，這時JS自己的任務已完成，繼續執行線程隊列中剩下的其他任務），然後在未來的某一時刻”任務隊列”線程監視到之前的發起的HTTP請求已完成， “任務隊列”就會把完成事件插入到JS執行隊列的尾部等待JS處理 。

最後專門說說定時觸發（settimeout和setinterval）。

定時觸發是由瀏覽器的定時器線程執行的定時計數， 然後在定時時間到達之後，定時器線程把定時處理函數的執行請求插入到JS回調隊列的尾端。

這個1到底是100毫秒之後彈出，還是1000毫秒（或更多時間）後彈出呢？又或是1100毫秒之後彈出？

答案是，1000毫秒多一點點之後彈出。

原因：瀏覽器會先執行setTimeout，也就是開始計時，然後開始執行sometask，執行了1000毫秒，然後去回調隊列里看回調任務，alert(1);早就恭候了，因為定時100毫秒之後alert(1)就可以執行了。所以，等1000毫秒的任務完成，1就會立即彈出，所以答案是1000毫秒多一點點之後彈出。

所以用這兩個函數的時候，實際的執行時間是大於或等於指定時間的，不保證能準確定時的。

最後強調一下setInterval。比如我希望每100毫秒打印一個1。然後，又有極端情況，就是sometask耗時1000毫秒。你以為sometask結束之後會打出10個1么？並不會，只會打出1個1，因為setInterval第一次讀秒結束之後，回調隊列出現了一個alert(1)，根據之前的理論，並不會執行。又過了100毫秒之後，計時器線程會去觀察回調隊列是不是已經有了alert(1)，如果有，就不再往回調隊列里加alert(1)，目的就是為了避免回調疊加執行。

總之，你需要記住，異步任務就是主線程在任務隊列里看到了這個任務，看了一眼之後就然後安排別的線程幫忙，然後主線程就忙別的去了，別的線程幫忙完事之後，再在隊列末尾放一個新任務叫“幫忙完畢”，到此異步任務本身就完事。主任務看到“幫忙完畢”任務之後，就去執行回調，回調執行完，這個異步任務連同回調就全都完事。然後，如果並沒有回調。。。沒有就沒有唄。

js的同步、異步是指什麼？怎麼回事？與線程有關嗎？

javascript 異步表示async，指：代碼執行不按順序，‘跳過’執行，待其他某些代碼執行完後，再來執行，稱為“異步”。

javascript同步表示sync，指：代碼依次執行。

就是這麼回事

javascript所謂的“線程”，就是這樣一種概念

這種情況容易出現在 ajax 當中，因為ajax最可能，也最多用到async 或者 sync的概念屬性。

javascript同步和異步的區別與實現方式

javascript語言是單線程機制。所謂單線程就是按次序執行，執行完一個任務再執行下一個。

對於瀏覽器來說，也就是無法在渲染頁面的同時執行代碼。

單線程機制的優點在於實現起來較為簡單，運行環境相對簡單。缺點在於，如果中間有任務需要響應時間過長，經常會導致

頁面加載錯誤或者瀏覽器無響應的狀況。這就是所謂的“同步模式”，程序執行順序與任務排列順序一致。對於瀏覽器來說，

同步模式效率較低，耗時長的任務都應該使用異步模式；而在服務器端，異步模式則是唯一的模式，如果採用同步模式個人認為

服務器很快就會出現12306在高峰期的表現。。。。

異步模式的四種方式：

1.回調函數callback

所謂回調函數，就是將函數作為參數傳到需要回調的函數內部再執行。

典型的例子就是發送ajax請求。例如：

$.ajax({

async: false,

cache: false,

dataType: ‘json’,

url: “url”,

success: function(data) {

console.log(‘success’);

},

error: function(data) {

console.log(‘error’);

}

})

當發送ajax請求後，等待回應的過程不會堵塞程序運行，耗時的操作相當於延後執行。

回調函數的優點在於簡單，容易理解，但是可讀性較差，耦合度較高，不易於維護。

2.事件驅動

javascript可以稱之為是基於對象的語言，而基於對象的基本特徵就是事件驅動（Event-Driven）。

事件驅動，指的是由鼠標和熱鍵的動作引發的一連串的程序操作。

例如，為頁面上的某個

$(‘#btn’).onclick(function(){

console.log(‘click button’);

});

綁定事件相當於在元素上進行監聽，是否執行註冊的事件代碼取決於事件是否發生。

優點在於容易理解，一個元素上可以綁定多個事件，有利於實現模塊化；但是缺點在於稱為事件驅動的模型後，流程不清晰。

3.發布/訂閱

發布訂閱模式（publish-subscribe pattern）又稱為觀察者模式(Observer pattern)。

該模式中，有兩類對象：觀察者和目標對象。目標對象中存在着一份觀察者的列表，當目標對象

的狀態發生改變時，主動通知觀察者，從而建立一種發布/訂閱的關係。

jquery有相關的插件，在這不是重點不細說了。。。。回頭寫個實現貼上來

4.promise模式

promise對象是CommonJS工作組提供的一種規範，用於異步編程的統一接口。

promise對象通常實現一種then的方法，用來在註冊狀態發生改變時作為對應的回調函數。

promise模式在任何時刻都處於以下三種狀態之一：未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）。以CommonJS

Promise/A

標準為例，promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。then方法會返回另一個promise對象，以便於形成promise管道，這種返回promise對象的方式能夠支持開發人員把異步操作串聯起來，如then(resolvedHandler,

rejectedHandler); 。resolvedHandler

回調函數在promise對象進入完成狀態時會觸發，並傳遞結果；rejectedHandler函數會在拒絕狀態下調用。

Jquery在1.5的版本中引入了一個新的概念叫Deferred，就是CommonJS promise A標準的一種衍生。可以在jQuery中創建

$.Deferref的對象。同時也對發送ajax請求以及數據類型有了新的修改，參考JQuery API。

除了以上四種，javascript中還可以利用各種函數模擬異步方式，更有詭異的諸如用同步調用異步的case

只能用team里同事形容java和javascript的一句話作為結尾：

“寫java像在高速路上開車，寫javascript像在草原上開車”————-以此來形容javascript這種無類型的語言有多自由

but，如果草原上都是坑。

js異步是什麼意思，怎麼理解js異步思想呢？

就是網頁在加載的時候註冊事件，但是只有在點擊等事件發生後才會觸發函數