這篇文章主要介紹了jQuery通過deferred對象管理ajax異步的相關(guān)資料,需要的朋友可以參考下
今天跟大家分享一個jquery中的對象-deferred。其實(shí)從jQuery 1.5.0版本開始引入的一個新功能----deferred對象。不過可能在實(shí)際開發(fā)過程中用到的并不多，所以沒有太在意。
什么是deferred對象？
開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時(shí)很長的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個大型數(shù)組），它們都不是立即能得到結(jié)果的。
通常的做法是，為它們指定回調(diào)函數(shù)（callback）。即事先規(guī)定，一旦它們運(yùn)行結(jié)束，應(yīng)該調(diào)用哪些函數(shù)。
但是，在回調(diào)函數(shù)方面，jQuery的功能非常弱。為了改變這一點(diǎn)，jQuery開發(fā)團(tuán)隊(duì)就設(shè)計(jì)了deferred對象。
簡單說，deferred對象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點(diǎn)再執(zhí)行。
這里先不說deferred的概念，我們先看一個例子。
還記得初學(xué)的時(shí)候，遇到一個實(shí)例，先是要ajax請求一個接口（a.json），從返回的數(shù)據(jù)中獲得一個id1值。然后再請求一個接口（b.json）獲得id2，最后需要對這兩個id值同時(shí)進(jìn)行操作。
錯誤解法
那個時(shí)候初學(xué)，首先想到的方案（現(xiàn)在想想，很傻很天真...）
var id1, id2;
$.ajax({
url: 'a.js',
dataType: 'json',
type: 'get',
success: function(d){
id1 = d.item.id;
}
});
$.ajax({
url: 'b.js',
dataType: 'json',
type: 'get',
success: function(d){
id2 = d.item.id;
}
})
alert('id1='+id1+','+ 'id2='+ id2);
因?yàn)槟莻€時(shí)候，還沒有理解異步的概念，所以以為，第二次ajax的時(shí)候id已經(jīng)有值了，但是運(yùn)行之后才發(fā)現(xiàn)，變量id其實(shí)根本沒被賦值。想要測試上面代碼，點(diǎn)這里也就是這一刻，我真正明白了:ajax是異步的?。?！。
傻瓜式解法
發(fā)現(xiàn)上面那個方法不能用之后，分析了一下，彈出undefined是因?yàn)閺棾鲋癷d還沒有被賦值，那我保證在彈出之前給id賦值不就解決了嗎？好的，于是我想到了下面這個方法：
var id1;
$.ajax({
url: '/test/json/a.js',
dataType: 'json',
type: 'get',
success: function(d){
id1 = d.item.id;
$.ajax({
url: '/test/json/b.js',
dataType: 'json',
type: 'get',
success: function(f){
id2 = f.item.id;
alert('id1='+id1+','+ 'id2='+ id2);
}
});
}
})
邏輯雖然正確了，但總覺得怪怪的，如果這里需要嵌套3層呢？4層呢？。。。ajax里面嵌套ajax，如果數(shù)據(jù)很多，訪問速度慢，嵌套更多層，會導(dǎo)致性能下降、影響用戶體驗(yàn)、代碼不好維護(hù)等等問題。所以一般不推薦這種方法。總之，這種寫法讓我難以接受。
所以思來想去，覺得不妥。。。然后那個時(shí)候就在一個前端群里，詢問各種大牛，直到一個大牛告訴我讓我百度一下deferred，后來認(rèn)真學(xué)習(xí)了下，覺得不錯。
使用deferred對象
deferred對象簡介
deferred是jquery中的擴(kuò)展的一個對象（1.5.0以上的版本支持deferred）。defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點(diǎn)再執(zhí)行。
簡單說，deferred對象就是jQuery的回調(diào)函數(shù)解決方案。
再簡單說，deferred對象用來管理異步操作，而ajax就是一種異步操作。
deferred基本語法
deferred讓ajax支持新的寫法，代碼如下：
$.ajax({
url: '/test/json/a.js',
dataType: 'json',
type: 'get'
})
.done(function() {
alert("成功啦！");
})
.fail(function() {
alert("失敗了...");
})
這個大家應(yīng)該都知道。現(xiàn)在在編輯器敲入ajax，然后回車，提示的ajax語法結(jié)構(gòu)就是這樣鏈?zhǔn)降膶懛ā?/P>
done函數(shù)就是ajax請求成功的回到函數(shù)；
fail函數(shù)就是ajax請求失敗的回調(diào)函數(shù)。
使用deferred的解決方法
var ajax1 = $.ajax({
url: '/test/json/a.js',
dataType: 'json',
type: 'get'
});
var ajax2 = $.ajax({
url: '/test/json/b.js',
dataType: 'json',
type: 'get',
});
$.when(ajax1,ajax2).done(function(d1,d2){
var id1 = d1[0].item.id;
var id2 = d2[0].item.id;
alert('id1='+id1+', '+ 'id2='+ id2);
}).fail(function(){
alert('error');
});
值得一提的是，上面代碼中done函數(shù)的參數(shù)，對應(yīng)的是前面每一個ajax請求返回的數(shù)據(jù)上面的代碼中，用到了deferred對象的when方法。
它的描述是：
提供一種方法來執(zhí)行一個或多個對象的回調(diào)函數(shù)。
這里的ajax1和ajax2就是deferred對象，done和fail就是回調(diào)函數(shù)。上面代碼的意思是：
只有當(dāng)兩個ajax請求都成功返回?cái)?shù)據(jù)時(shí)，執(zhí)行done函數(shù)；只要有一個請求不成功，就執(zhí)行fail函數(shù)。
另外值得一提的是：$.when方法的參數(shù)，只支持deferred對象，而ajax返回的就是deferred對象。`
這就已經(jīng)實(shí)現(xiàn)了上面的需求了。請求兩個接口，獲得兩個數(shù)據(jù)，都成功時(shí)，對這兩個數(shù)據(jù)同時(shí)進(jìn)行處理。而且這種鏈?zhǔn)綄懛?，讓讀者一目了然，而且便于維護(hù)擴(kuò)展。
deferred方法匯總
提到的方法
$.Deferred()：生成一個deferred對象。
$.when() 為多個操作指定回調(diào)函數(shù)。
deferred.done()：指定操作成功后的回調(diào)函數(shù)
deferred.fail()：指定操作失敗后的回調(diào)函數(shù)
未提到的方法
•deferred.resolve()方法和deferred.reject()方法
deferred對象執(zhí)行回調(diào)函數(shù)之前會有一個執(zhí)行狀態(tài)的存在，執(zhí)行狀態(tài)一共有三種———未完成、已完成和已失敗。
未完成狀態(tài)，則會繼續(xù)等待，或者執(zhí)行progress()指定的回調(diào)函數(shù)。
已完成狀態(tài)，則會執(zhí)行done()方法指定的回調(diào)函數(shù)。
已失敗狀態(tài)，則會執(zhí)行fail()方法指定的回調(diào)函數(shù)。
所以這里的deferred.resolve()方法就是手動將deferred對象的狀態(tài)改為已完成，繼而執(zhí)行done方法; deferred.reject()方法就是手動將狀態(tài)改為已失敗，繼而執(zhí)行fail方法。
下面來看一個例子：
var defer = $.Deferred(); // 新建一個Deferred對象
var wait = function(defer){
var tasks = function(){
defer.resolve(); // 改變Deferred對象為已完成狀態(tài)
alert("執(zhí)行完畢！");
};
setTimeout(tasks,5000);
return defer;
};
$.when(wait(defer))
.done(function(){
alert("succeed");
})
.fail(function(){
alert("failed");
});
結(jié)果：等待5秒鐘，先彈出“succeed”，在彈出“執(zhí)行完畢！”。
分析一下代碼執(zhí)行過程：
$.when()里面的參數(shù)是wait函數(shù)，也就是一個deferred對象，所以可以繼續(xù)執(zhí)行setTimeout函數(shù)，等待5s，執(zhí)行tasks函數(shù)，然后手動改變了狀態(tài)為“已完成”，所以執(zhí)行done方法，彈出“succeed”，然后彈出“執(zhí)行完畢！”。
deferred.then()：有時(shí)為了省事，可以把done()和fail()合在一起寫，這就是then()方法。
function successFun(){
alert("yes");
}
function failFun(){
alert('fail');
}
$.when($.ajax({
url: '/test/json/a.js',
dataType:'json',
type: 'get'
}))
.then(successFun, failFun);
當(dāng)then方法只有一個參數(shù)時(shí)，相當(dāng)于done方法。當(dāng)有兩個參數(shù)時(shí)，第一個相當(dāng)于done方法，第二個相當(dāng)于fail方法。
總結(jié):
deferred對象通過對一個ajax請求的各種回調(diào)函數(shù)的控制，讓jquery寫ajax變的簡單、容易維護(hù)、容易擴(kuò)展。
以上所述是小編給大家介紹的jQuery通過deferred對象管理ajax異步的相關(guān)知識，希望對大家有所幫助
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試