jQuery中deferred對象使用方法詳解
來源:易賢網 閱讀:863 次 日期:2016-07-27 15:08:00
溫馨提示:易賢網小編為您整理了“jQuery中deferred對象使用方法詳解”,方便廣大網友查閱!

在jquery1.5之后的版本中,加入了一個deferred對象,也就是延遲對象,用來處理未來某一時間點發生的回調函數。同時,還改寫了ajax方法,現在的ajax方法返回的是一個deferred對象。

那就來看看deferred對象的用法。

1.ajax的鏈式回調 

// ajax方法返回的是一個deferred對象,可以直接使用鏈式寫法

$.ajax('test.json').done(function(resp){

 // done 相當于success回調,其中默認的參數為success回調的參數

 alert('success');

}).fail(function(){

 // fail 相當于error回調

 alert('error');

});

還可以同時寫多個回調,會按照順序依次執行 

$.ajax('test.json').done(function(resp){

 // done 相當于success回調,其中默認的參數為success回調的參數

 alert('success');

}).done(function(){

 // do something...

}).done(function(){

 // do something...

});

deferred對象還有一個then方法,其實它是一個整合done和fail的方法,它接受一到兩個參數,如果有兩個參數,那么第一個就是done方法的回調函數,第二個是fail方法的回調函數。如果只有一個參數,那就是done方法的回調函數。 

var success = function(){

 alert('success'); 

};

var error = function(){

 alert('error');

};

// 兩個參數

$.ajax('test.json').then(success, error);

// 一個參數

$.ajax('test.json').then(success);

jQuery還提供了一個$.when(deferreds)的方法來執行一個或多個延遲對象的回調函數,當它的參數是延遲對象時,它會在所有延遲對象代表的異步執行完后再執行相應的回調函數 

$.when($.ajax('test.json'), $.ajax('demo.json')) .done(function(){

 alert('success'); 

}).fail(function(){

 alert('error');

});

很好理解,只有當所有異步都成功時,才會執行done方法中的回調,否則會執行fail方法中的回調,同樣好理解的是的done方法中回調函數的默認參數數量則和when方法參數數量相同。

而如果when方法中傳入的只是普通對象,不是deferred對象時,會立即執行done方法中的回調,回調函數的默認參數為傳入when方法的對象本身。

// 當傳入when方法的參數只是普通對象時

$.when({test: 'test'}).done(function(resp){

 console.log(resp.test); // 'test' 

}).fail(function(){

 // 由于傳入的對象不是deferred對象,那么就不會調用fail中的回調了 

}) 

當你需要兩個甚至更多的異步結束后才調用回調函數,同時這些異步ajax可能還需要修改傳輸方式type或者傳數據data時,代碼就顯得很亂,可讀性很差。 

所以就可以對ajax進行再次封裝,提高代碼可讀性 

var ajax = function(url, type, param){

 return $.ajax({

 url: url,

 type: type,

 data: param || {} 

 }); 

};

ajax('test.json').done(function(resp){

 alert('success');

}).fail(function(){

 alert('error');

});

接者學習,漏了一個always()方法,參數也是回調函數,與done和fail不同的是,無論任何情況都執行always方法中的回調。

deferred對象不光可以用在jquery的ajax方法中,他提供了一系列的接口,使它的通用型大大提高。

比如有這樣一個耗時比較久的方法

function a(){

 function b(){

 alert('start');

 } 

 setTimeout(b, 3000); 

如果要在這個方法之后執行某個回調,就不能用$.when()了,因為當$.when()的參數不為deferred對象是會直接調用done或者always中的回調函數。

這個時候就要使用deferred對象的其他方法了,還是上面的方法,做一些改寫 

function a(){

 var def = $.Deferred(); // 創建deferred對象 

 function b(){

 alert('start');

 def.resolve(); // 改變deferred對象的狀態

 } 

 setTimeout(b, 3000); 

 return def;

}

$.when(a()).done(function(){

 alert("It's callback");

});

分析一下:

 1). $.Deferred()方法會創建一個deferred對象

 2). def.resolve()會改變deferred對象的狀態,deferred對象有三種狀態,未完成,成功,失敗。

 它有resolve()和reject()兩個方法,resolve方法可以把對象狀態改為成功,reject方法可以把狀態改為失敗。

 又有以上的寫法會出現問題,返回的deferred對象可以被外部改變狀態,所以還提供了一個promise()方法,這個方法會在deferred對象的基礎上返回一個新的deferred對象,不同的是,返回的對象只存在可被觀察到狀態,而不具備可改變其狀態的方法,類似返回了一個只讀的deferred對象。

所以同樣的例子可以改寫成這樣 

function a(){

 var def = $.Deferred(); // 創建deferred對象 

 function b(){

 alert('start');

 def.resolve(); // 改變deferred對象的狀態

 } 

 setTimeout(b, 3000); 

 return def.promise();

}

$.when(a().reject()).done(function(){ // reject()方法無效

 alert("It's callback");

});

以上就是本文的全部內容,希望對大家的學習有所幫助

更多信息請查看網絡編程
易賢網手機網站地址:jQuery中deferred對象使用方法詳解
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看