如何使用jquery中deferred對(duì)象

如何使用jquery中deferred對(duì)象？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、陽江網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

什么是 deferred 對(duì)象？

延遲對(duì)象，在jQuery的1.5引入，是通過調(diào)用jQuery.Deferred()方法創(chuàng)建一個(gè)可鏈?zhǔn)秸{(diào)用的工具對(duì)象。 它可以注冊(cè)多個(gè)回調(diào)到回調(diào)隊(duì)列， 調(diào)用回調(diào)隊(duì)列，準(zhǔn)備代替任何同步或異步函數(shù)的成功或失敗狀態(tài)?！猨Query API中文文檔簡(jiǎn)單說，deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是"延遲"，所以deferred對(duì)象的含義就是"延遲"到未來某個(gè)點(diǎn)再執(zhí)行。它解決了如何處理耗時(shí)操作的問題，對(duì)那些操作提供了更好的控制，以及統(tǒng)一的編程接口?！钜环?/p>

deferred 對(duì)象的主要功能

ajax 操作的鏈?zhǔn)綄懛?/strong>

$.ajax("test.html")
　  .done(function(){ alert("success"); })
　  .fail(function(){ alert("error"); });

$.ajax() 操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR對(duì)象，無法進(jìn)行鏈?zhǔn)讲僮鳎蝗绻歉哂?.5.0版本，返回的是deferred對(duì)象，可以進(jìn)行鏈?zhǔn)讲僮?。可以看到，done() 相當(dāng)于 success 方法，fail() 相當(dāng)于 error 方法。采用鏈?zhǔn)綄懛ㄒ院?，代碼的可讀性大大提高。

這里著重強(qiáng)調(diào)一下 jqXHR 對(duì)象，從 jQuery 1.5 開始， $.ajax() 返回的 jqXHR對(duì)象 本身就是 deferred 對(duì)象，因此可以像上面代碼中那樣進(jìn)行鏈?zhǔn)秸{(diào)用。

從 jQuery 1.5 開始，$.ajax()返回的jqXHR對(duì)象 實(shí)現(xiàn)了 Promise 接口, 使它擁有了 Promise 的所有屬性，方法和行為。（見Deferred object獲取更多信息）。為了讓回調(diào)函數(shù)的名字統(tǒng)一，便于在$.ajax()中使用。jqXHR也提供.error() .success()和.complete()方法。這些方法都帶有一個(gè)參數(shù)，該參數(shù)是一個(gè)函數(shù)，此函數(shù)在 $.ajax()請(qǐng)求結(jié)束時(shí)被調(diào)用,并且這個(gè)函數(shù)接收的參數(shù)，與調(diào)用 $.ajax()函數(shù)時(shí)的參數(shù)是一致。這將允許你在一次請(qǐng)求時(shí)，對(duì)多個(gè)回調(diào)函數(shù)進(jìn)行賦值，甚至允許你在請(qǐng)求已經(jīng)完成后，對(duì)回調(diào)函數(shù)進(jìn)行賦值(如果該請(qǐng)求已經(jīng)完成，則回調(diào)函數(shù)會(huì)被立刻調(diào)用)。

注意事項(xiàng): jqXHR.success(), jqXHR.error(), 和 jqXHR.complete() 回調(diào)從 jQuery 1.8開始 被棄用過時(shí)，從jQuery 3.0開始被刪除，你可以使用 jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。

指定同一操作的多個(gè)回調(diào)函數(shù)
deferred 對(duì)象的一大好處，就是它允許你自由添加多個(gè)回調(diào)函數(shù)。還是以上面的代碼為例，如果ajax操作成功后，除了原來的回調(diào)函數(shù)，我還想再運(yùn)行一個(gè)回調(diào)函數(shù)，怎么辦？很簡(jiǎn)單，直接把它加在后面就行了。

$.ajax("test.html")
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); })
　   .done(function(){ alert('第二個(gè)回調(diào)函數(shù)！'); });

回調(diào)函數(shù)可以添加任意多個(gè)，它們按照添加順序執(zhí)行。

為多個(gè)操作指定回調(diào)函數(shù)
deferred 對(duì)象的另一大好處，就是它允許你為多個(gè)事件指定一個(gè)回調(diào)函數(shù)，這是傳統(tǒng)寫法做不到的。

請(qǐng)看下面的代碼，它用到了一個(gè)新的方法 jQuery.when()：

$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

這段代碼的意思是，先執(zhí)行兩個(gè)操作$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就運(yùn)行done()指定的回調(diào)函數(shù)；如果有一個(gè)失敗或都失敗了，就執(zhí)行fail()指定的回調(diào)函數(shù)。

$.when()方法的使用具體 參見文檔。

普通操作的回調(diào)函數(shù)接口
deferred 對(duì)象的最大優(yōu)點(diǎn)，就是它把這一套回調(diào)函數(shù)接口，從ajax操作擴(kuò)展到了所有操作。也就是說，任何一個(gè)操作----不管是ajax操作還是本地操作，也不管是異步操作還是同步操作----都可以使用deferred對(duì)象的各種方法，指定回調(diào)函數(shù)。

我們來看一個(gè)具體的例子，為一個(gè)很耗時(shí)的操作 wait 指定回調(diào)函數(shù)：

var wait = function (dtd) {
    var dtd = $.Deferred(); // 在函數(shù)內(nèi)部，新建一個(gè)Deferred對(duì)象
    var tasks = function () {
        alert('執(zhí)行完畢！');
        dtd.resolve(); // 改變Deferred對(duì)象的執(zhí)行狀態(tài)
    };

    setTimeout(tasks, 5000);
    return dtd.promise(); // 返回promise對(duì)象
};

$.when(wait())
    .done(function () { alert('success'); })
    .fail(function () { alert('error'); });

另一種做法是直接將 wait 函數(shù)傳入 $.Deferred()：

$.Deferred(wait)
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

jQuery 規(guī)定，$.Deferred() 可以接受一個(gè)函數(shù)名（注意，是函數(shù)名）作為參數(shù)，$.Deferred() 所生成的 deferred 對(duì)象將作為這個(gè)函數(shù)的默認(rèn)參數(shù)。

更具體的信息請(qǐng)參見 阮一峰的文檔。

deferred 對(duì)象的方法

$.Deferred() 生成一個(gè) deferred 對(duì)象。
jQuery.Deferred( [beforeStart ] ) 工廠函數(shù)創(chuàng)建一個(gè)新的deferred對(duì)象。

描述: 一個(gè)工廠函數(shù)，這個(gè)函數(shù)返回一個(gè)鏈?zhǔn)綄?shí)用對(duì)象，用返回對(duì)象方法來在回調(diào)隊(duì)列中注冊(cè)多個(gè)回調(diào)， 調(diào)用回調(diào)隊(duì)列，傳遞任何同步或異步函數(shù)的成功或失敗狀態(tài)。

beforeStart : 類型 Function( Deferred deferred )，一個(gè)構(gòu)造函數(shù)返回之前調(diào)用的函數(shù)。

jQuery.Deferred 方法可以傳遞一個(gè)可選的函數(shù)， 這個(gè)函數(shù)在方法返回之前調(diào)用，并且會(huì)把新的 deferred（延遲）對(duì)象作為 this 對(duì)象，將其作為第一個(gè)參數(shù)傳遞給函數(shù)。例如，被調(diào)用的函數(shù)可以使用 deferred.then() 綁定回調(diào)。

deferred.done() 指定操作成功時(shí)的回調(diào)函數(shù)。

deferred.fail() 指定操作失敗時(shí)的回調(diào)函數(shù)。

deferred.promise() 沒有參數(shù)時(shí)，返回一個(gè)新的 deferred。 對(duì)象，該對(duì)象的運(yùn)行狀態(tài)無法被改變；接受參數(shù)時(shí)，作用為在參數(shù)對(duì)象上部署 deferred 接口。

deferred.resolve() 手動(dòng)改變 deferred 對(duì)象的運(yùn)行狀態(tài)為"已完成"，從而立即觸發(fā) done() 方法。

一個(gè) Deferred（延遲）對(duì)象開始于 pending 狀態(tài)。 任何回調(diào)使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到這個(gè)對(duì)象都是排隊(duì)等待執(zhí)行。調(diào)用 deferred.resolve() 轉(zhuǎn)換 Deferred（遞延）到 resolved（解決）的狀態(tài)，并立即執(zhí)行設(shè)置中任何的 doneCallbacks。調(diào)用 deferred.reject() 轉(zhuǎn)換 Deferred（遞延）到 rejected（拒絕）的狀態(tài)，并立即執(zhí)行設(shè)置中任何的 failCallbacks。一旦對(duì)象已經(jīng)進(jìn)入了解決或拒絕狀態(tài)，它處于該狀態(tài)?；卣{(diào)仍然可以添加到解決或拒絕 Deferred（遞延）- 他們會(huì)立即執(zhí)行。

$.ajax() 返回的 jqXHR 對(duì)象 會(huì)根據(jù)請(qǐng)求返回的結(jié)果，自動(dòng)改變自身的執(zhí)行狀態(tài)。但是，對(duì)于其他通過 $.Deferred() 方法生成的 deferred 對(duì)象，它們的執(zhí)行狀態(tài)必須由程序員手動(dòng)指定，由代碼決定在什么時(shí)候觸發(fā)回調(diào)函數(shù)。

deferred.reject() 這個(gè)方法與 deferred.resolve() 正好相反，調(diào)用后將 deferred 對(duì)象的運(yùn)行狀態(tài)變?yōu)?quot;已失敗"，從而立即觸發(fā) fail() 方法。

$.when() 為多個(gè)操作指定回調(diào)函數(shù)。

deferred.then() 方法
有時(shí)為了省事，可以把 done() 和 fail() 合在一起寫，這就是 then() 方法。

$.when($.ajax( '/main.php' ))
　　 .then(successFunc, failureFunc);

如果 then() 有兩個(gè)參數(shù)，那么第一個(gè)參數(shù)是 done() 方法的回調(diào)函數(shù)，第二個(gè)參數(shù)是 fail() 方法的回調(diào)方法。如果 then() 只有一個(gè)參數(shù)，那么等同于 done()。

deferred.always() 方法
這個(gè)方法也是用來指定回調(diào)函數(shù)的，它的作用是，不管調(diào)用的是 deferred.resolve() 還是 deferred.reject()，最后總是執(zhí)行。

$.ajax( 'test.html' )
    .always( function() { alert('已執(zhí)行！');} );

看完上述內(nèi)容，你們掌握如何使用jquery中deferred對(duì)象的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！