jQuery通過deferred對象管理ajax異步_

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

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

3、誤會法 那個時候初學，首先想到的方案（現(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); 由于那個時候，還沒有理解異步的概念，所以以為，其次次ajax的時候id已經(jīng)有值了，但是運行之后才發(fā)覺，

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

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

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

7、lert(失敗了.); ) 這個大家應當都知道?，F(xiàn)在在編輯器敲入ajax，然后回車，提示的ajax語法結構就是這樣鏈式的寫法。 done函數(shù)就是ajax懇求勝利的回到函數(shù)； fail函數(shù)就是ajax懇求失敗的回調函數(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ù)，對應的是前面每一個ajax懇求返回的數(shù)據(jù)上面的代碼中，用到了deferred對象的when方法。 它的描述是： 供應一種方法來執(zhí)行一個或多個對象的回調函數(shù)。 這里的ajax1和ajax2就是deferred對象，done和fail就是回調函數(shù)。上面代碼的意思是： 只有當兩個ajax懇求都勝利返回數(shù)據(jù)時，執(zhí)行do

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

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

11、= $.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); ); 結果：等待5秒鐘，先彈出“succeed”，在彈出“執(zhí)行完畢！”。

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