首頁 > web前端 > js教程 > jquery中deferred物件的用法介紹(附範例)

jquery中deferred物件的用法介紹(附範例)

不言
發布: 2019-03-27 09:20:05
轉載
2132 人瀏覽過

這篇文章帶給大家的內容是關於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中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板