前言：

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

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

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

一、回調函數

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

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

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

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

回調函數：優(yōu)點是簡單、容易理解和部署。

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

二、事件監(jiān)聽

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

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

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

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

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

缺點是整個程序都要變成事件驅動型，運動流程會變得很不清晰。

三、發(fā)布/訂閱

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

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

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

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

四、Promises對象

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

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

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

Promises對象這種方法優(yōu)點在于，回調函數變成了鏈式寫法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以實現許多強大的功能。

五、生成器函數 Generator/yield

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

yield表達式可以暫停函數執(zhí)行，next方法用于恢復函數執(zhí)行，這使得Generator函數非常適合將異步任務同步化。
yield表達式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個參數，該參數就會被當作上一個yield表達式的返回值。
每個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并不是為異步而設計出來的，它還有其他功能（對象迭代、控制輸出、部署Interator接口…）

六、async/await 函數的實現

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

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

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

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

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

1.await命令后面返回的是 Promise 對象，運行結果可能是rejected，所以最好把await命令放在try…catch代碼塊中。

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

總結：

簡簡單單的六種方法：

js 異步編程的進化史：callback -> promise  -> generator -> asnyc + await

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

最新評論