前言：

javascript語言的執(zhí)行環(huán)境是"單線程"。也就是指一次只能完成一件任務(wù)。如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，在執(zhí)行后面一個任務(wù)

這種模式雖然實(shí)現(xiàn)起來比較簡單，執(zhí)行環(huán)境相對單純，但是只要一個任務(wù)耗時很長，后面的任務(wù)都必須排隊等著，會拖延整個程序的執(zhí)行。常見的瀏覽器無響應(yīng)（假死），往往是因為莫一段javascript代碼長時間運(yùn)行（比如死循環(huán)），導(dǎo)致整個頁面卡在這個地方，其他任務(wù)無法運(yùn)行。

為了解決這個問題Javascript語言將任務(wù)的執(zhí)行模式分成兩種：同步和異步。我們在這里主要來說說 異步編程

一、回調(diào)函數(shù)

這是異步編程最基本的方法

假如有兩個函數(shù)f1和f2，后者等待前者的執(zhí)行結(jié)果。如果f1是一個很耗時的任務(wù)，可以考慮改寫f1，把f2寫成f1的回調(diào)函數(shù)。

function f1(callback) {
  setTimeout(function () {
     callback();
  },1000);
}
f1()f2;

采用這種方式，我們把同步操作變成了異步操作，f1不會堵塞程序的運(yùn)行，相當(dāng)于先執(zhí)行程序的主要邏輯，將耗時的操作推遲執(zhí)行。

回調(diào)函數(shù)：優(yōu)點(diǎn)是簡單、容易理解和部署。

缺點(diǎn)是不利于代碼的閱讀和維護(hù)，各個部分之間高度耦合（Coupling），流程會很混亂，而且每個任務(wù)只能指定一個回調(diào)函數(shù)。

二、事件監(jiān)聽

采用事件驅(qū)動模式。任務(wù)的執(zhí)行不取決于代碼的順序，而取決與某個事件的發(fā)生。

以f1和f2為例。先為f1綁定事件

	f1.on('done', f2);
	function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

f1.trigger(‘done’)表示，執(zhí)行完成之后，立即觸發(fā)done事件，從而開始執(zhí)行f2.

事件監(jiān)聽：優(yōu)點(diǎn)是可以綁定多個事件，每個事件可以指定多個回調(diào)函數(shù)，而且可以“去耦合”（Decoupling），有利于實(shí)現(xiàn)模塊化。

缺點(diǎn)是整個程序都要變成事件驅(qū)動型，運(yùn)動流程會變得很不清晰。

三、發(fā)布/訂閱

發(fā)布/訂閱模式，又稱觀察者模式

我們假定，存在一個“信號中心”，某個任務(wù)執(zhí)行完成，就向信號中心“發(fā)布”（publish）一個信號，其他任務(wù)可以向信號中心“訂閱”（subcribe）這個信號，從而知道什么時候自己可以開始執(zhí)行。

	//f2向信號中心Jquery訂閱done信號
	jQuery.subscribe("done", f2);
	function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
		   //發(fā)布done信號
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}
　　//f2執(zhí)行完成后，取消訂閱
　　jQuery.unsubscribe("done", f2);

發(fā)布/訂閱，性質(zhì)與“事件監(jiān)聽類似”，但是明顯優(yōu)于后者，因為我們可以通過查看”消息中心“，了解存在多少信號，多少個訂閱者，從而監(jiān)聽程序的運(yùn)行。

四、Promises對象

Promises對象是CommonJs工作提出的一種規(guī)范，目的是為了異步編程提供統(tǒng)一接口

他的思想是每一個異步任務(wù)返回一個Promise對象，該對象有一個then方法，允許指定回調(diào)函數(shù)，比如f1的回調(diào)函數(shù)f2，可以寫成：

	f1().then(f2);
　	function f1(){
　		//deferred對象就是jQuery的回調(diào)函數(shù)解決方案。
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
		   //將dtd對象的執(zhí)行狀態(tài)從"未完成"改為"已完成"，從而觸發(fā)done()方法
　　　　　　dfd.resolve();
　　　　}, 500);
	   //返回promise對象 
	   // deferred.promise()方法。它的作用是，在原來的deferred對象上返回另一個deferred對象，
	   //后者只開放與改變執(zhí)行狀態(tài)無關(guān)的方法（比如done()方法和fail()方法），
	   //屏蔽與改變執(zhí)行狀態(tài)有關(guān)的方法（比如resolve()方法和reject()方法），
	   //從而使得執(zhí)行狀態(tài)不能被改變。
　　　　return dfd.promise;
　　}
 
	f1().then(f2).then(f3); //指定多個回調(diào)函數(shù)
	f1().then(f2).fail(f3); //指定發(fā)生錯誤時的回調(diào)函數(shù)

Promises對象這種方法優(yōu)點(diǎn)在于，回調(diào)函數(shù)變成了鏈?zhǔn)綄懛?，程序的流程可以看得很清楚，而且有一整套的配套方法，可以?shí)現(xiàn)許多強(qiáng)大的功能。

五、生成器函數(shù) Generator/yield

Generator函數(shù)是 ES6 提供的一種異步編程解決方案。

yield表達(dá)式可以暫停函數(shù)執(zhí)行，next方法用于恢復(fù)函數(shù)執(zhí)行，這使得Generator函數(shù)非常適合將異步任務(wù)同步化。
yield表達(dá)式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個參數(shù)，該參數(shù)就會被當(dāng)作上一個yield表達(dá)式的返回值。
每個yield返回的是｛value:yield返回的值，done:true/false(執(zhí)行狀態(tài))｝

	function *generatorDemo() {
	 yield 'hello';
	 yield 1 + 2;
	 return 'ok';
	}
	 
	var demo = generatorDemo()
	 
	demo.next()  // { value: 'hello', done: false } 
	demo.next()  // { value: 3, done: false } 
	demo.next()  // { value: 'ok', done: ture } 
	demo.next()  // { value: undefined, done: ture }
	  

Generator并不是為異步而設(shè)計出來的，它還有其他功能（對象迭代、控制輸出、部署Interator接口…）

六、async/await 函數(shù)的實(shí)現(xiàn)

async是“異步”的意思，而 await 是等待的意思。所以應(yīng)該很好理解 async 用于申明一個 異步的function （實(shí)際上是asnyc function 對象）

await 用于等待一個異步任務(wù)執(zhí)行完成的結(jié)果，并且await只等出現(xiàn)在 async 函數(shù)中

一個函數(shù)如果加上 asnyc，那么該函數(shù)就會返回一個 Promise

async function async1() {
  return "1"
}
console.log(async1()) // -> Promise {<resolved>: "1"}

async函數(shù)返回的是一個 Promise 對象，可以使用 then 方法添加回調(diào)函數(shù)，async 函數(shù)內(nèi)部 return 語句返回的值，會成為 then 方法回調(diào)函數(shù)的參數(shù)。當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

1.await命令后面返回的是 Promise 對象，運(yùn)行結(jié)果可能是rejected，所以最好把a(bǔ)wait命令放在try…catch代碼塊中。

	async function test(){
   		let newTime
   		 = await new Promise((resolve,reject)=>{//這里等待異步返回結(jié)果，再繼續(xù)向下執(zhí)行
       let time = 3000;     
       setTimeout(()=>{
          resolve(time);
       },time)
   	})
   console.log(newTime+'毫秒后執(zhí)行');
   let content = 'test';
   console.log(content);      //3s后，先輸出  “3000毫秒后執(zhí)行”，再輸出 "test"
	}
   test()

總結(jié)：

簡簡單單的六種方法：

js 異步編程的進(jìn)化史：callback -> promise  -> generator -> asnyc + await

到此這篇關(guān)于JS異步編程方法的6種方案總結(jié)的文章就介紹到這了,更多相關(guān)JS異步編程方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！