jquery中deferred物件的用法介紹（附範例）

這篇文章帶給大家的內容是關於jquery中deferred物件的用法介紹（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是 deferred 物件？

延遲對象，在jQuery的1.5引入，是透過呼叫jQuery.Deferred()方法來建立一個可鍊式呼叫的工具對象。它可以註冊多個回調到回呼隊列， 呼叫回呼隊列，準備取代任何同步或非同步函數的成功或失敗狀態。 ——jQuery API中文文件簡單說，deferred物件就是jQuery的回呼函數解決方案。在英文中，defer的意思是"延遲"，所以deferred物件的意思是"延遲"到未來某個點再執行。它解決瞭如何處理耗時操作的問題，對那些操作提供了更好的控制，以及統一的程式設計介面。 ——阮一峰

deferred 物件的主要功能

ajax 操作的鍊式寫法

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

$.ajax() 操作完成後，如果使用的是低於1.5.0版本的jQuery，返回的是XHR對象，無法進行鍊式操作；如果是高於1.5.0版本，則返回的是deferred對象，可以進行鍊式操作。可以看到，done() 相當於 success 方法，fail() 相當於 error 法。採用鍊式寫法以後，程式碼的可讀性大大提高。

這裡著重於 jqXHR 對象，從 jQuery 1.5 開始， $.ajax() 傳回的 jqXHR物件 本身就是 deferred 對象，因此可以像上面程式碼中那樣進行鍊式呼叫。

從 jQuery 1.5 開始，$.ajax()傳回的jqXHR物件 實作了 Promise 介面, 使它擁有了 Promise 的所有屬性，方法和行為。 （請參閱Deferred object以取得更多資訊）。為了讓回呼函數的名字統一，方便在$.ajax()中使用。 jqXHR也提供.error() .success()和.complete()方法。這些方法都帶有一個參數，該參數是一個函數，此函數在 $.ajax()請求結束時被調用,並且這個函數接收的參數，與調用 $.ajax()函數時的參數是一致。這將允許你在一次請求時，對多個回調函數進行賦值，甚至允許你在請求已經完成後，對回調函數進行賦值(如果該請求已經完成，則回調函數會被立刻調用)。

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

指定同一操作的多個回呼函數
deferred 物件的一大好處，就是它允許你自由地新增多個回呼函數。還是以上面的程式碼為例，如果ajax操作成功後，除了原來的回呼函數，我還想再運行一個回呼函數，怎麼辦？很簡單，直接把它加在後面就行了。

$.ajax("test.html")
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); })
　   .done(function(){ alert('第二个回调函数！'); });

回呼函數可以新增任意多個，它們按照新增順序執行。

為多個運算指定回呼函數
deferred 物件的另一個好處，就是它允許你為多個事件指定一個回呼函數，這是傳統寫法做不到的。

請看下面的程式碼，它用到了一個新的方法jQuery.when()：#​​##

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

這段程式碼的意思是，先執行兩個動作$.ajax("test1 .html")和$.ajax("test2.html")，如果都成功了，就運行done()指定的回調函數；如果有一個失敗或都失敗了，就執行fail()指定的回調函數。

$.when() 方法的使用具體 請參閱文件。

普通操作的回呼函數接口 deferred 物件的最大優點，就是它把這套回調函數接口，從ajax操作擴展到了所有操作。也就是說，任何一個操作----不管是ajax操作還是本地操作，也不管是非同步操作還是同步操作----都可以使用deferred物件的各種方法，指定回調函數。

我們來看一個具體的例子，為一個很耗時的操作wait 指定回呼函數：

var wait = function (dtd) {
    var dtd = $.Deferred(); // 在函数内部，新建一个Deferred对象
    var tasks = function () {
        alert('执行完毕！');
        dtd.resolve(); // 改变Deferred对象的执行状态
    };

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

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

另一種做法是直接將wait 函數傳入

$.Deferred ()：

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

jQuery 規定，

$.Deferred() 可以接受一個函數名稱（注意，是函數名稱）作為參數，$.Deferred() 所產生的deferred 物件將會作為這個函數的預設參數。

更具體的資訊請參考 阮一峰的文檔。

deferred 物件的方法

$.Deferred() 產生一個 deferred 物件。

jQuery.Deferred( [beforeStart ] ) 工廠函數建立一個新的deferred物件。

描述: 一個工廠函數，這個函數返回一個鍊式實用對象，用返回對象方法來在回調隊列中註冊多個回調， 呼叫回調隊列，傳遞任何同步或非同步函數的成功或失敗狀態。

beforeStart : 類型 Function( Deferred deferred )，一個建構子傳回先前呼叫的函數。

jQuery.Deferred 方法可以传递一个可选的函数， 这个函数在方法返回之前调用，并且会把新的 deferred（延迟）对象作为 this 对象，将其作为第一个参数传递给函数。例如，被调用的函数可以使用 deferred.then() 绑定回调。

deferred.done() 指定操作成功时的回调函数。

deferred.fail() 指定操作失败时的回调函数。

deferred.promise() 没有参数时，返回一个新的 deferred。 对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署 deferred 接口。

deferred.resolve() 手动改变 deferred 对象的运行状态为"已完成"，从而立即触发 done() 方法。

一个 Deferred（延迟）对象开始于 pending 状态。 任何回调使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到这个对象都是排队等待执行。调用 deferred.resolve() 转换 Deferred（递延）到 resolved（解决）的状态，并立即执行设置中任何的 doneCallbacks。调用 deferred.reject() 转换 Deferred（递延）到 rejected（拒绝）的状态，并立即执行设置中任何的 failCallbacks。一旦对象已经进入了解决或拒绝状态，它处于该状态。回调仍然可以添加到解决或拒绝 Deferred（递延）- 他们会立即执行。

$.ajax() 返回的 jqXHR 对象 会根据请求返回的结果，自动改变自身的执行状态。但是，对于其他通过 $.Deferred() 方法生成的 deferred 对象，它们的执行状态必须由程序员手动指定，由代码决定在什么时候触发回调函数。

deferred.reject() 这个方法与 deferred.resolve() 正好相反，调用后将 deferred 对象的运行状态变为"已失败"，从而立即触发 fail() 方法。

$.when() 为多个操作指定回调函数。

deferred.then() 方法
有时为了省事，可以把 done() 和 fail() 合在一起写，这就是 then() 方法。

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

如果 then() 有两个参数，那么第一个参数是 done() 方法的回调函数，第二个参数是 fail() 方法的回调方法。如果 then() 只有一个参数，那么等同于 done()。

deferred.always() 方法
这个方法也是用来指定回调函数的，它的作用是，不管调用的是 deferred.resolve() 还是 deferred.reject()，最后总是执行。

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

更多信息请参见 jQuery API中文文档。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

以上是jquery中deferred物件的用法介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！