jQuery中deferred對(duì)象使用方法詳解
在jquery1.5之后的版本中,加入了一個(gè)deferred對(duì)象,也就是延遲對(duì)象,用來(lái)處理未來(lái)某一時(shí)間點(diǎn)發(fā)生的回調(diào)函數(shù)。同時(shí),還改寫了ajax方法,現(xiàn)在的ajax方法返回的是一個(gè)deferred對(duì)象。
那就來(lái)看看deferred對(duì)象的用法。
1.ajax的鏈?zhǔn)交卣{(diào)
// ajax方法返回的是一個(gè)deferred對(duì)象,可以直接使用鏈?zhǔn)綄懛?
$.ajax('test.json').done(function(resp){
// done 相當(dāng)于success回調(diào),其中默認(rèn)的參數(shù)為success回調(diào)的參數(shù)
alert('success');
}).fail(function(){
// fail 相當(dāng)于error回調(diào)
alert('error');
});
還可以同時(shí)寫多個(gè)回調(diào),會(huì)按照順序依次執(zhí)行
$.ajax('test.json').done(function(resp){
// done 相當(dāng)于success回調(diào),其中默認(rèn)的參數(shù)為success回調(diào)的參數(shù)
alert('success');
}).done(function(){
// do something...
}).done(function(){
// do something...
});
deferred對(duì)象還有一個(gè)then方法,其實(shí)它是一個(gè)整合done和fail的方法,它接受一到兩個(gè)參數(shù),如果有兩個(gè)參數(shù),那么第一個(gè)就是done方法的回調(diào)函數(shù),第二個(gè)是fail方法的回調(diào)函數(shù)。如果只有一個(gè)參數(shù),那就是done方法的回調(diào)函數(shù)。
var success = function(){
alert('success');
};
var error = function(){
alert('error');
};
// 兩個(gè)參數(shù)
$.ajax('test.json').then(success, error);
// 一個(gè)參數(shù)
$.ajax('test.json').then(success);
jQuery還提供了一個(gè)$.when(deferreds)的方法來(lái)執(zhí)行一個(gè)或多個(gè)延遲對(duì)象的回調(diào)函數(shù),當(dāng)它的參數(shù)是延遲對(duì)象時(shí),它會(huì)在所有延遲對(duì)象代表的異步執(zhí)行完后再執(zhí)行相應(yīng)的回調(diào)函數(shù)
$.when($.ajax('test.json'), $.ajax('demo.json')) .done(function(){
alert('success');
}).fail(function(){
alert('error');
});
很好理解,只有當(dāng)所有異步都成功時(shí),才會(huì)執(zhí)行done方法中的回調(diào),否則會(huì)執(zhí)行fail方法中的回調(diào),同樣好理解的是的done方法中回調(diào)函數(shù)的默認(rèn)參數(shù)數(shù)量則和when方法參數(shù)數(shù)量相同。
而如果when方法中傳入的只是普通對(duì)象,不是deferred對(duì)象時(shí),會(huì)立即執(zhí)行done方法中的回調(diào),回調(diào)函數(shù)的默認(rèn)參數(shù)為傳入when方法的對(duì)象本身。
// 當(dāng)傳入when方法的參數(shù)只是普通對(duì)象時(shí)
$.when({test: 'test'}).done(function(resp){
console.log(resp.test); // 'test'
}).fail(function(){
// 由于傳入的對(duì)象不是deferred對(duì)象,那么就不會(huì)調(diào)用fail中的回調(diào)了
})
當(dāng)你需要兩個(gè)甚至更多的異步結(jié)束后才調(diào)用回調(diào)函數(shù),同時(shí)這些異步ajax可能還需要修改傳輸方式type或者傳數(shù)據(jù)data時(shí),代碼就顯得很亂,可讀性很差。
所以就可以對(duì)ajax進(jìn)行再次封裝,提高代碼可讀性
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');
});
接者學(xué)習(xí),漏了一個(gè)always()方法,參數(shù)也是回調(diào)函數(shù),與done和fail不同的是,無(wú)論任何情況都執(zhí)行always方法中的回調(diào)。
deferred對(duì)象不光可以用在jquery的ajax方法中,他提供了一系列的接口,使它的通用型大大提高。
比如有這樣一個(gè)耗時(shí)比較久的方法
function a(){
function b(){
alert('start');
}
setTimeout(b, 3000);
}
如果要在這個(gè)方法之后執(zhí)行某個(gè)回調(diào),就不能用$.when()了,因?yàn)楫?dāng)$.when()的參數(shù)不為deferred對(duì)象是會(huì)直接調(diào)用done或者always中的回調(diào)函數(shù)。
這個(gè)時(shí)候就要使用deferred對(duì)象的其他方法了,還是上面的方法,做一些改寫
function a(){
var def = $.Deferred(); // 創(chuàng)建deferred對(duì)象
function b(){
alert('start');
def.resolve(); // 改變deferred對(duì)象的狀態(tài)
}
setTimeout(b, 3000);
return def;
}
$.when(a()).done(function(){
alert("It's callback");
});
分析一下:
1). $.Deferred()方法會(huì)創(chuàng)建一個(gè)deferred對(duì)象
2). def.resolve()會(huì)改變deferred對(duì)象的狀態(tài),deferred對(duì)象有三種狀態(tài),未完成,成功,失敗。
它有resolve()和reject()兩個(gè)方法,resolve方法可以把對(duì)象狀態(tài)改為成功,reject方法可以把狀態(tài)改為失敗。
又有以上的寫法會(huì)出現(xiàn)問(wèn)題,返回的deferred對(duì)象可以被外部改變狀態(tài),所以還提供了一個(gè)promise()方法,這個(gè)方法會(huì)在deferred對(duì)象的基礎(chǔ)上返回一個(gè)新的deferred對(duì)象,不同的是,返回的對(duì)象只存在可被觀察到狀態(tài),而不具備可改變其狀態(tài)的方法,類似返回了一個(gè)只讀的deferred對(duì)象。
所以同樣的例子可以改寫成這樣
function a(){
var def = $.Deferred(); // 創(chuàng)建deferred對(duì)象
function b(){
alert('start');
def.resolve(); // 改變deferred對(duì)象的狀態(tài)
}
setTimeout(b, 3000);
return def.promise();
}
$.when(a().reject()).done(function(){ // reject()方法無(wú)效
alert("It's callback");
});
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中for..in循環(huán)陷阱介紹
for...in循環(huán)中的循環(huán)計(jì)數(shù)器是字符串,而不是數(shù)字它包含當(dāng)前屬性的名稱或當(dāng)前數(shù)組元素的索引,下面有個(gè)不錯(cuò)的示例大家可以參考下2013-11-11
JavaScript在IE和Firefox(火狐)的不兼容問(wèn)題解決方法小結(jié)
今天測(cè)試代碼時(shí),發(fā)現(xiàn)不少IE可以運(yùn)行的ajax,但在FF中報(bào)錯(cuò)。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結(jié)如下,需要的朋友可以看下,對(duì)于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。2010-04-04
Javascript設(shè)置對(duì)象的ReadOnly屬性(示例代碼)
本篇文章主要介紹了Javascript設(shè)置對(duì)象的ReadOnly屬性(示例代碼) 需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
BootstrapValidator實(shí)現(xiàn)注冊(cè)校驗(yàn)和登錄錯(cuò)誤提示效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap Validator實(shí)現(xiàn)注冊(cè)校驗(yàn)和登錄錯(cuò)誤提示效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
typescript+react實(shí)現(xiàn)移動(dòng)端和PC端簡(jiǎn)單拖拽效果
這篇文章主要為大家詳細(xì)介紹了typescript+react實(shí)現(xiàn)移動(dòng)端和PC端簡(jiǎn)單拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
解決微信內(nèi)置瀏覽器返回上一頁(yè)強(qiáng)制刷新問(wèn)題方法
微信內(nèi)置瀏覽器在返回上一頁(yè)面,且上一頁(yè)面包含AJAX代碼時(shí),頁(yè)面就會(huì)被強(qiáng)制刷新,極度影響用戶體驗(yàn)。而我們想要的效果是:返回上一頁(yè)面時(shí),頁(yè)面還停留在原來(lái)的狀態(tài),AJAX獲取到的數(shù)據(jù)還在,滾動(dòng)條也在原來(lái)的位置。下面跟著小編一起來(lái)看下吧2017-02-02
弱類型語(yǔ)言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類型語(yǔ)言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a,b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-08-08

