jQuery通過(guò)deferred對(duì)象管理ajax異步_

1、jQuery通過(guò)deferred對(duì)象管理ajax異步_ 這篇文章主要介紹了jQuery通過(guò)deferred對(duì)象管理ajax異步的相關(guān)資料,需要的伴侶可以參考下 今日跟大家分享一個(gè)jquery中的對(duì)象-deferred。其實(shí)從jQuery 1.5.0版本開(kāi)頭引入的一個(gè)新功能-deferred對(duì)象。不過(guò)可能在實(shí)際開(kāi)發(fā)過(guò)程中用到的并不多，所以沒(méi)有太在意。 什么是deferred對(duì)象？ 開(kāi)發(fā)網(wǎng)站的過(guò)程中，我們常常遇到某些耗時(shí)很長(zhǎng)的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個(gè)大型數(shù)組），它們都不是立刻能得到結(jié)果的。 通常的做法是，為它們指定回

2、調(diào)函數(shù)（callback）。即事先規(guī)定，一旦它們運(yùn)行結(jié)束，應(yīng)當(dāng)調(diào)用哪些函數(shù)。 但是，在回調(diào)函數(shù)方面，jQuery的功能特別弱。為了轉(zhuǎn)變這一點(diǎn)，jQuery開(kāi)發(fā)團(tuán)隊(duì)就設(shè)計(jì)了deferred對(duì)象。 簡(jiǎn)潔說(shuō)，deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語(yǔ)中，defer的意思是延遲，所以deferred對(duì)象的含義就是延遲到將來(lái)某個(gè)點(diǎn)再執(zhí)行。 這里先不說(shuō)deferred的概念，我們先看一個(gè)例子。 還記得初學(xué)的時(shí)候，遇到一個(gè)實(shí)例，先是要ajax懇求一個(gè)接口（a.json），從返回的數(shù)據(jù)中獲得一個(gè)id1值。然后再懇求一個(gè)接口（b.json）獲得id2，最終需要對(duì)這兩個(gè)id值同時(shí)進(jìn)行操作。 錯(cuò)

3、誤會(huì)法 那個(gè)時(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); 由于那個(gè)時(shí)候，還沒(méi)有理解異步的概念，所以以為，其次次ajax的時(shí)候id已經(jīng)有值了，但是運(yùn)行之后才發(fā)覺(jué)，

4、變量id其實(shí)根本沒(méi)被賦值。想要測(cè)試上面代碼，點(diǎn)這里也就是這一刻，我真正明白了:ajax是異步的！。 傻瓜式解法 發(fā)覺(jué)上面那個(gè)方法不能用之后，分析了一下，彈出undefined是由于彈出之前id還沒(méi)有被賦值，那我保證在彈出之前給id賦值不就解決了嗎？好的，于是我想到了下面這個(gè)方法： 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

5、, success: function(f) id2 = f.item.id; alert(id1=+id1+,+ id2=+ id2); ); ) 規(guī)律雖然正確了，但總覺(jué)得怪怪的，假如這里需要嵌套3層呢？4層呢？。ajax里面嵌套ajax，假如數(shù)據(jù)許多，訪問(wèn)速度慢，嵌套更多層，會(huì)導(dǎo)致性能下降、影響用戶體驗(yàn)、代碼不好維護(hù)等等問(wèn)題。所以一般不推舉這種方法?？傊?，這種寫(xiě)法讓我難以接受。 所以思來(lái)想去，覺(jué)得不妥。然后那個(gè)時(shí)候就在一個(gè)前端群里，詢問(wèn)各種大牛，直到一個(gè)大牛告訴我讓我百度一下deferred，后來(lái)仔細(xì)學(xué)習(xí)了下，覺(jué)得不錯(cuò)。 用法deferred對(duì)象 deferred對(duì)象簡(jiǎn)介 deferred

6、是jquery中的擴(kuò)展的一個(gè)對(duì)象（1.5.0以上的版本支持deferred）。defer的意思是延遲，所以deferred對(duì)象的含義就是延遲到將來(lái)某個(gè)點(diǎn)再執(zhí)行。 簡(jiǎn)潔說(shuō)，deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。 再簡(jiǎn)潔說(shuō)，deferred對(duì)象用來(lái)管理異步操作，而ajax就是一種異步操作。 deferred基本語(yǔ)法 deferred讓ajax支持新的寫(xiě)法，代碼如下： $.ajax( url: /test/json/a.js, dataType: json, type: get ) .done(function() alert(勝利啦！); ) .fail(function() a

7、lert(失敗了.); ) 這個(gè)大家應(yīng)當(dāng)都知道?，F(xiàn)在在編輯器敲入ajax，然后回車，提示的ajax語(yǔ)法結(jié)構(gòu)就是這樣鏈?zhǔn)降膶?xiě)法。 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(functi

8、on(d1,d2) var id1 = d10.item.id; var id2 = d20.item.id; alert(id1=+id1+, + id2=+ id2); ).fail(function() alert(error); ); 值得一提的是，上面代碼中done函數(shù)的參數(shù)，對(duì)應(yīng)的是前面每一個(gè)ajax懇求返回的數(shù)據(jù)上面的代碼中，用到了deferred對(duì)象的when方法。 它的描述是： 供應(yīng)一種方法來(lái)執(zhí)行一個(gè)或多個(gè)對(duì)象的回調(diào)函數(shù)。 這里的ajax1和ajax2就是deferred對(duì)象，done和fail就是回調(diào)函數(shù)。上面代碼的意思是： 只有當(dāng)兩個(gè)ajax懇求都勝利返回?cái)?shù)據(jù)時(shí)，執(zhí)行do

9、ne函數(shù)；只要有一個(gè)懇求不勝利，就執(zhí)行fail函數(shù)。 另外值得一提的是：$.when方法的參數(shù)，只支持deferred對(duì)象，而ajax返回的就是deferred對(duì)象。 這就已經(jīng)實(shí)現(xiàn)了上面的需求了。懇求兩個(gè)接口，獲得兩個(gè)數(shù)據(jù)，都勝利時(shí)，對(duì)這兩個(gè)數(shù)據(jù)同時(shí)進(jìn)行處理。而且這種鏈?zhǔn)綄?xiě)法，讓讀者一目了然，而且便于維護(hù)擴(kuò)展。 deferred方法匯總 提到的方法 $.Deferred()：生成一個(gè)deferred對(duì)象。 $.when() 為多個(gè)操作指定回調(diào)函數(shù)。 deferred.done()：指定操作勝利后的回調(diào)函數(shù) deferred.fail()：指定操作失敗后的回調(diào)函數(shù) 未提到的方法 deferred

10、.resolve()方法和deferred.reject()方法 deferred對(duì)象執(zhí)行回調(diào)函數(shù)之前會(huì)有一個(gè)執(zhí)行狀態(tài)的存在，執(zhí)行狀態(tài)一共有三種未完成、已完成和已失敗。 未完成狀態(tài)，則會(huì)連續(xù)等待，或者執(zhí)行progress()指定的回調(diào)函數(shù)。 已完成狀態(tài)，則會(huì)執(zhí)行done()方法指定的回調(diào)函數(shù)。 已失敗狀態(tài)，則會(huì)執(zhí)行fail()方法指定的回調(diào)函數(shù)。 所以這里的deferred.resolve()方法就是手動(dòng)將deferred對(duì)象的狀態(tài)改為已完成，繼而執(zhí)行done方法; deferred.reject()方法就是手動(dòng)將狀態(tài)改為已失敗，繼而執(zhí)行fail方法。 下面來(lái)看一個(gè)例子： var defer

11、= $.Deferred(); / 新建一個(gè)Deferred對(duì)象 var wait = function(defer) var tasks = function() defer.resolve(); / 轉(zhuǎn)變Deferred對(duì)象為已完成狀態(tài) alert(執(zhí)行完畢！); ; setTimeout(tasks,5000); return defer; ; $.when(wait(defer) .done(function() alert(succeed); ) .fail(function() alert(failed); ); 結(jié)果：等待5秒鐘，先彈出“succeed”，在彈出“執(zhí)行完畢！”。

12、分析一下代碼執(zhí)行過(guò)程： $.when()里面的參數(shù)是wait函數(shù)，也就是一個(gè)deferred對(duì)象，所以可以連續(xù)執(zhí)行setTimeout函數(shù)，等待5s，執(zhí)行tasks函數(shù)，然后手動(dòng)轉(zhuǎn)變了狀態(tài)為“已完成”，所以執(zhí)行done方法，彈出“succeed”，然后彈出“執(zhí)行完畢！”。 deferred.then()：有時(shí)為了省事，可以把done()和fail()合在一起寫(xiě)，這就是then()方法。 function successFun() alert(yes); function failFun() alert(fail); $.when($.ajax( url: /test/json/a.js, dataType:json, type: get ) .then(successFun