jQuery通過deferred對象管理ajax非同步_jquery

今天跟大家分享一個jquery中的對象-deferred。其實從jQuery 1.5.0版本開始引入的一個新功能----deferred對象。不過可能在實際開發過程中用到的並不多，所以沒有太在意。

什麼是deferred對象？

開發網站的過程中，我們經常遇到某些耗時很長的javascript操作。其中，既有非同步操作（比如ajax讀取伺服器資料），也有同步的操作（比如遍曆一個大型數組），它們都不是立即能得到結果的。

通常的做法是，為它們指定回呼函數（callback）。即事先規定，一旦它們運行結束，應該調用哪些函數。

但是，在回呼函數方面，jQuery的功能非常弱。為了改變這一點，jQueryTeam Dev就設計了deferred對象。

簡單說，deferred對象就是jQuery的回呼函數解決方案。在英語中，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點再執行。

這裡先不說deferred的概念，我們先看一個例子。

還記得初學的時候，遇到一個執行個體，先是要ajax請求一個介面（a.json），從返回的資料中獲得一個id1值。然後再請求一個介面（b.json）獲得id2，最後需要對這兩個id值同時進行操作。

錯誤解法

那個時候初學，首先想到的方案（現在想想，很傻很天真...）

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已經有值了，但是運行之後才發現，變數id其實根本沒被賦值。想要測試上面代碼，點這裡

也就是這一刻，我真正明白了:ajax是非同步！！！。

傻瓜式解法

發現上面那個方法不能用之後，分析了一下，彈出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',success: function(f){id2 = f.item.id;alert('id1='+id1+','+ 'id2='+ id2);}});}}) 

邏輯雖然正確了，但總覺得怪怪的，如果這裡需要嵌套3層呢？4層呢？。。。ajax裡面嵌套ajax，如果資料很多，訪問速度慢，嵌套更多層，會導致效能下降、影響使用者體驗、代碼不好維護等等問題。所以一般不推薦這種方法。總之，這種寫法讓我難以接受。

所以思來想去，覺得不妥。。。然後那個時候就在一個前端群裡，詢問各種大牛，直到一個大牛告訴我讓我百度一下deferred，後來認真學習了下，覺得不錯。

使用deferred對象

deferred對象簡介

deferred是jquery中的擴充的一個對象（1.5.0以上的版本支援deferred）。defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點再執行。

簡單說，deferred對象就是jQuery的回呼函數解決方案。

再簡單說，deferred對象用來管理非同步作業，而ajax就是一種非同步作業。

deferred基本文法

deferred讓ajax支援新的寫法，代碼如下：

$.ajax({url: '/test/json/a.js',dataType: 'json',type: 'get'}).done(function() {alert("成功啦！");}).fail(function() {alert("失敗了...");}) 

這個大家應該都知道。現在在編輯器敲入ajax，然後斷行符號，提示的ajax文法結構就是這樣鏈式的寫法。

done函數就是ajax請求成功的回到函數；

fail函數就是ajax請求失敗的回呼函數。

使用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函數的參數，對應的是前面每一個ajax請求返回的資料

上面的代碼中，用到了deferred對象的when方法。

它的描述是：

提供一種方法來執行一個或多個對象的回呼函數。

這裡的ajax1和ajax2就是deferred對象，done和fail就是回呼函數。上面代碼的意思是：

只有當兩個ajax請求都成功返回資料時，執行done函數；只要有一個請求不成功，就執行fail函數。

另外值得一提的是：$.when方法的參數，只支援deferred對象，而ajax返回的就是deferred對象。`

這就已經實現了上面的需求了。請求兩個介面，獲得兩個資料，都成功時，對這兩個資料同時進行處理。而且這種鏈式寫法，讓讀者一目瞭然，而且便於維護擴充。

deferred方法匯總

提到的方法

$.Deferred()：產生一個deferred對象。

$.when() 為多個操作指定回呼函數。

deferred.done()：指定操作成功後的回呼函數

deferred.fail()：指定操作失敗後的回呼函數

未提到的方法

•deferred.resolve()方法和deferred.reject()方法

deferred對象執行回呼函數之前會有一個執行狀態的存在，執行狀態一共有三種———未完成、已完成和已失敗。

未完成狀態，則會繼續等待，或者執行progress()指定的回呼函數。

完成狀態，則會執行done()方法指定的回呼函數。

已失敗狀態，則會執行fail()方法指定的回呼函數。

所以這裡的deferred.resolve()方法就是手動將deferred對象的狀態改為已完成，繼而執行done方法; deferred.reject()方法就是手動將狀態改為已失敗，繼而執行fail方法。

下面來看一個例子：

var defer = $.Deferred(); // 建立一個Deferred對象　　　　var wait = function(defer){　　　　var tasks = function(){defer.resolve(); // 改變Deferred對象為完成狀態　　　　 alert("執行完畢！");　　　　};　　　　setTimeout(tasks,5000);　　　　return defer;　　};　 $.when(wait(defer))　　.done(function(){　　 alert("succeed"); 　　 })　　.fail(function(){　　 alert("failed"); 　　}); 

結果：等待5秒鐘，先彈出“succeed”，在彈出“執行完畢！”。

分析一下代碼執行過程：

$.when()裡面的參數是wait函數，也就是一個deferred對象，所以可以繼續執行setTimeout函數，等待5s，執行tasks函數，然後手動改變了狀態為“已完成”，所以執行done方法，彈出“succeed”，然後彈出“執行完畢！”。

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, failFun); 

當then方法只有一個參數時，相當於done方法。當有兩個參數時，第一個相當於done方法，第二個相當於fail方法。

總結

deferred對象通過對一個ajax請求的各種回呼函數的控制，讓jquery寫ajax變的簡單、容易維護、容易擴充。

以上所述是小編給大家介紹的jQuery通過deferred對象管理ajax非同步相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！