溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery延遲對象怎么使用

發(fā)布時間:2022-11-03 09:36:20 來源:億速云 閱讀:139 作者:iii 欄目:web開發(fā)

這篇文章主要介紹“jquery延遲對象怎么使用”,在日常操作中,相信很多人在jquery延遲對象怎么使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”jquery延遲對象怎么使用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!

jquery延遲對象是“Deferred”,是通過調(diào)用jQuery.Deferred()方法來創(chuàng)建的可鏈接的實用對象。延遲對象是可鏈接的,類似于一個jQuery對象可鏈接的方式,區(qū)別于它有自己的方法;它可注冊多個回調(diào)函數(shù)到回調(diào)列表,調(diào)用回調(diào)列表并且傳遞異步或同步功能的成功或失敗的狀態(tài)。

jQuery 1.5中介紹了 Deferred 延遲對象,它是通過調(diào)用 jQuery.Deferred() 方法來創(chuàng)建的可鏈接的實用對象。它可注冊多個回調(diào)函數(shù)到回調(diào)列表,調(diào)用回調(diào)列表并且傳遞異步或同步功能的成功或失敗的狀態(tài)。

延遲對象是可鏈接的,類似于一個 jQuery 對象可鏈接的方式,區(qū)別于它有自己的方法。在創(chuàng)建一個 Deferred 對象之后,您可以使用以下任何方法,直接鏈接到通過調(diào)用一個或多個的方法創(chuàng)建或保存的對象。

列表

函數(shù)說明
$.Deferred()用來返回一個鏈式實用對象方法來注冊多個回調(diào),并且調(diào)用回調(diào)隊列,傳遞任何同步或異步功能成功或失敗的狀態(tài)。
deferred.always()用于當(dāng)Deferred(延遲)對象被受理或被拒絕時,調(diào)用添加的處理程序
deferred.done()用于當(dāng)Deferred(延遲)對象被受理時,調(diào)用添加的處理程序
deferred.fail()用于當(dāng) Deferred (延遲)對象被拒絕時,調(diào)用添加的處理程序
deferred.progress()用于當(dāng)Deferred(延遲)對象生成進度通知時,調(diào)用添加處理程序
deferred.isRejected()1.8-用來確定 Deferred 對象是否已被拒絕
deferred.isResolved()1.8-用來確定 Deferred 對象是否已被拒絕
deferred.notify()用于傳遞參數(shù)給進行中的回調(diào)
deferred.notifyWith()用于傳遞參數(shù),上下文對象給進行中的回調(diào)
deferred.reject()用于拒絕延遲對象,并傳遞參數(shù)給失敗回調(diào)函數(shù)
deferred.rejectWith()用于拒絕延遲對象,并傳遞參數(shù)和上下文對象給失敗回調(diào)函數(shù)
deferred.resolve()用于解決延遲對象,并并傳遞參數(shù)給doneCallbacks 回調(diào)函數(shù)
deferred.resolveWith()用于解決延遲對象,并并傳遞參數(shù)和上下文對象給doneCallbacks 回調(diào)函數(shù)
deferred.state()用于確定一個Deferred(延遲)對象的當(dāng)前狀態(tài)
deferred.pipe()用于過濾狀態(tài)或通過函數(shù)返回的延遲對象的值
deferred.then()用于當(dāng)Deferred(延遲)對象被解決,拒絕或仍在進行中時,調(diào)用添加處理程序。
deferred.catch()用于當(dāng)Deferred對象被拒絕(reject)時,調(diào)用添加的處理程序。
deferred.promise()用于返回 Deferred(延遲)的 Promise 對象
.promise()用于返回一個 Promise 對象,觀察某種類型被綁定到集合的所有行動,是否已被加入到隊列中。

說明

$.Deferred()

$.Deferred() 是一個構(gòu)造函數(shù),用來返回一個鏈式實用對象方法來注冊多個回調(diào),并且調(diào)用回調(diào)隊列,傳遞任何同步或異步功能成功或失敗的狀態(tài)。

提示:

  • $.Deferred() 構(gòu)造函數(shù)創(chuàng)建一個新的 Deferred(延遲)對象, jQuery.Deferred
    可傳遞一個可選的函數(shù),該函數(shù)在構(gòu)造方法返回之前被調(diào)用并傳遞一個新的 Deferred 對象作為函數(shù)的第一個參數(shù)。例如被調(diào)用的函數(shù)可以使用 deferred.then()來附加回調(diào)函數(shù)。

  • 一個 Deferred 對象開始于掛起狀態(tài)。任何使用 deferred.then(), deferred.always(),
    deferred.done(), 或者 deferred.fail() 添加到這個對象的回調(diào)函數(shù)都是排隊等待執(zhí)行的。

調(diào)用 deferred.resolve() 或 eferred.resolveWith() 轉(zhuǎn)換延遲到解決狀態(tài)后立即執(zhí)行設(shè)置的
doneCallbacks 。
調(diào)用 deferred.reject() 或 deferred.rejectWith() 轉(zhuǎn)換延遲到拒絕狀態(tài)后立即執(zhí)行設(shè)置的 failCallbacks 。一旦對象已經(jīng)進入了解決或拒絕狀態(tài),它保持該狀態(tài)?;卣{(diào)仍然可以添加到已解決或已拒絕的 Deferred 對象——它們會立即執(zhí)行。

語法

  • $.Deferred( [beforeStart ] )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
beforeStartFunction類型 個在構(gòu)造函數(shù)返回之前調(diào)用的函數(shù)

返回值

jQuery.Deferred()工廠函數(shù)創(chuàng)建一個新的deferred對象。


deferred.always()

當(dāng)Deferred(延遲)對象被受理或被拒絕時,調(diào)用通過deferred.always() 添加的處理程序。

提示:參數(shù)可以是一個函數(shù)或一個函數(shù)數(shù)組。由于 deferred.always() 返回的是一個 Deferred 對象,所以可以連接其他的延遲對象方法(這里是指可以繼續(xù)調(diào)用Deferred對象的方法),包括額外的 .always 方法。 當(dāng) Deferred 對象得到解決或被拒絕時,通過deferred.always() 添加的回調(diào)函數(shù)按它們被添加時的順序執(zhí)行,并且可以作為參數(shù)傳遞給如下的方法使用:resolve , reject , resolveWith 或 rejectWith。

語法

  • deferred.always( alwaysCallbacks [, alwaysCallbacks ] )

jQuery1.6新增該函數(shù)

參數(shù)說明

參數(shù)說明
alwaysCallbacks可選/Function類型 一個函數(shù)或者函數(shù)數(shù)組,當(dāng)Deferred(延遲)對象得到解決或被拒絕時被調(diào)用

注意: deferred.always()方法接收了Deferred對象.resolve()或.reject()使用的參數(shù), 這往往是非常不同的。 為此, 最好的只用它的行為,而不去檢查他的參數(shù)。 在大多數(shù)情況下, 使用顯式 .done() 或 .fail()處理程序,因為他們的參數(shù)都是已知的。

返回值

deferred.always()返回Deferred(延遲)對象

示例&說明

jQuery.get()方法返回一個來自一個Deferred(延遲)對象的jqXHR對象,我們可以附加一個成功和錯誤使用deferred.always()方法的回調(diào),jQuery示例代碼:

 $.get( "test.php" ).always(function() {
    alert( "帶有成功和錯誤的回調(diào)參數(shù)的$.get方法已完成。" );
 })


deferred.done()

當(dāng)Deferred(延遲)對象被受理時,調(diào)用通過延遲對象函數(shù)deferred.done()添加的處理程序。

提示:該方法接受一個或者多個參數(shù)。deferred.done() 返回的是一個 Deferred 對象, 可以連接其他的延遲對象方法(繼續(xù)調(diào)用Deferred 對象的方法),包括額外的 .done() 方法。當(dāng)Deferred 對象得到解決時,通過deferred.done()添加的回調(diào)函數(shù)按它們被添加時的順序執(zhí)行,并且可以作為參數(shù)傳遞給如下的方法使用:resolve,resolveWith。

語法

  • deferred.done( doneCallbacks [, doneCallbacks ] )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
doneCallbacks可選/Function類型 一個函數(shù)或者函數(shù)數(shù)組,當(dāng)Deferred(延遲)對象得到解決時被調(diào)用

返回值

deferred.done() 返回的是一個 Deferred 對象

示例&說明

HTML示例代碼:

 <button>Go</button>
 <p>Ready...</p>

jQuery示例代碼

function fn1() {
  $("p").append(" 1 ");
}
function fn2() {
  $("p").append(" 2 ");
}
function fn3(n) {
  $("p").append(n + " 3 " + n);
}

var dfd = $.Deferred();//創(chuàng)建一個延遲對象

//添加dfd被解決時需要的被調(diào)用的處理函數(shù)
dfd
.done( [fn1, fn2], fn3, [fn2, fn1] )// 連接一個函數(shù)或者函數(shù)數(shù)組
.done(function(n) {//可以連接其他的方法
  $("p").append(n + " we're done.");
});

//當(dāng)點擊按鈕時修改延遲對象的狀態(tài)為已解決
//此時調(diào)用通過deferred.done()添加的延遲對象被受理后的處理函數(shù)
$("button").bind("click", function() {
  dfd.resolve("and");//輸出:1 2 and 3 and 2 1 and we're done.
});


deferred.fail()

當(dāng) Deferred (延遲)對象被拒絕時,調(diào)用通過deferred.fail()添加的處理程序。

提示:該方法接受一個或者多個參數(shù)。 deferred.fail() 返回的是一個 Deferred 對象, 可以連接其他的延遲對象方法(繼續(xù)調(diào)用其他Deferred 對象的方法),包括額外的 .fail() 方法。當(dāng) Deferred 對象被拒絕時,通過deferred.fail()添加的回調(diào)函數(shù) 按它們被添加時的順序執(zhí)行,并且可以作為參數(shù)傳遞給如下的方法使用:deferred.resolve() 或 deferred.rejectWith()。

語法

  • deferred.fail( failCallbacks [, failCallbacks ] )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
failCallbacks可選/Function類型 一個函數(shù)或者函數(shù)數(shù)組,當(dāng)Deferred(延遲)對象被拒絕時被調(diào)用

返回值

deferred.fail() 返回的是一個 Deferred 對象

示例&說明

jQuery示例代碼

$(function () { 
    $.get("test.php")
        .done(function(){ alert("$.get 成功!"); })//解決時調(diào)用
        .fail(function(){ alert("$.get 失敗!"); });//被拒絕時調(diào)用
})


deferred.progress()

deferred.progress() 函數(shù)當(dāng)Deferred(延遲)對象生成進度通知時,調(diào)用添加處理程序。

注意:當(dāng)通過調(diào)用 notify 或 notifyWith 使延遲對象產(chǎn)生進度通知時,progressCallbacks 就會被調(diào)用。 由于 deferred.progress()返回的是延遲對象,所以其它延遲對象方法可以鏈接到該對象上(鏈式調(diào)用)。當(dāng)延遲對象被 resolved 或 rejected 時, 進度回調(diào)函數(shù)將不再被調(diào)用,但是當(dāng)Deferred (延遲)進入resolved(解決) 或 rejected(拒絕)狀態(tài)后,新添加任何的progressCallbacks將立即執(zhí)行,使用的參數(shù)被傳遞給.notify() 或 notifyWith()調(diào)用

語法

  • deferred.progress( progressCallbacks[,progressCallbacks] )

jQuery 1.7 新增該函數(shù)

參數(shù)說明

參數(shù)說明
progressCallbacks可選/Function類型 一個函數(shù)或者函數(shù)數(shù)組,當(dāng)Deferred(延遲)對象生成正在執(zhí)行中的進度通知時被調(diào)用。

返回值

deferred.progress() 返回的是一個 Deferred 對象


deferred.isRejected()

deferred.isRejected() 函數(shù)用來確定 Deferred 對象是否已被拒絕。

從jQuery1.7開始已經(jīng)過時,請使用 deferred.state() 代替。

注意:

  • 如果 Deferred(延遲)對象是在被拒絕的狀態(tài),則返回 true。這意味著 deferred.reject() 或者deferred.rejectWith() 已經(jīng)在對象上被調(diào)用過,并且 failCallbacks 已經(jīng)被調(diào)用過(或者正處于被調(diào)用的階段)。

  • Deferred(延遲)對象可以有三種狀態(tài):掛起(pending),解決(resolved),或拒絕(rejected);使用 deferred.isResolved() 來判斷延遲對象是否在解決狀態(tài)。

語法

  • deferred.isRejected()

jQuery 1.5 新增該函數(shù),1.7過時,1.8移除

返回值

deferred.isRejected() 返回的是一個 Boolean類型


deferred.isResolved()

deferred.isResolved() 函數(shù)用來確定 Deferred 對象是否已被解決。

從jQuery1.7開始已經(jīng)過時,請使用 deferred.state() 代替。

注意:

  • 如果 Deferred(延遲)對象是在被解決的狀態(tài),則返回 true。這意味著 deferred.resolve() 或者 deferred.resolveWith() 已經(jīng)在對象上被調(diào)用過,并且 doneCallbacks 已經(jīng)被調(diào)用過(或者正處于被調(diào)用的階段)。

  • Deferred(延遲)對象可以有三種狀態(tài):掛起(pending),解決(resolved),或拒絕(rejected);使用 deferred.isRejected() 來判斷延遲對象是否在拒絕狀態(tài)。

語法

  • deferred.isResolved()

jQuery 1.5 新增該函數(shù),1.7過時,1.8移除

返回值

deferred.isResolved() 返回的是一個 Boolean類型


deferred.notify()

deferred.notify() 函數(shù)用于定一個參數(shù),傳遞給正在調(diào)用的延遲對象上的回調(diào)函數(shù) ( progressCallbacks )。

注意:

  • 通常,只有延遲對象(Deferred)的創(chuàng)建者才能調(diào)用此方法。

  • 你可以通過調(diào)用 deferred.promise() 返回一個受限的 Promise 對象,來阻止其它代碼改變延遲對象的狀態(tài)或報告它的狀態(tài)。

  • 當(dāng) deferred.notify 被訪問時, 任何 progressCallbacks 可以通過訪問 deferred.then 或者 deferred.progress 來添加。回調(diào)依照他們添加時的順序執(zhí)行。

通過來自.notify()的傳遞參數(shù)給正在調(diào)用的延遲對象上的回調(diào)函數(shù),當(dāng)遲延對象已經(jīng)被
resolved 或被 rejected 之后,再調(diào)用任何 .notify() (或者添加 progressCallbacks) 都會
被忽略

語法

  • deferred.notify( args )

jQuery 1.7 新增該函數(shù)

參數(shù)說明

參數(shù)說明
args可選/Object類型 傳遞一個可選的參數(shù)給進行中的回調(diào)(progressCallbacks)

返回值

deferred.notify() 返回的是一個 Deferred 對象

小知識

jQuery提供的deferred.promise()方法的作用是,在原來的Deferred 對象上返回另一個 Deferred 對象,即受限制的 Promise 對象,受限制的 Promise 對象只開放與改變執(zhí)行狀態(tài)無關(guān)的方法(比如done()方法和fail()方法),屏蔽與改變執(zhí)行狀態(tài)有關(guān)的方法(比如resolve()方法和reject()方法),從而使得執(zhí)行狀態(tài)不能被改變。

首先看一個 Deferred對象的執(zhí)行狀態(tài)被改變的例子:

var dtd = $.Deferred(); // 新建一個Deferred對象
var wait = function(dtd){
  var tasks = function(){
    alert("執(zhí)行完畢!");
    dtd.resolve(); // 改變Deferred對象的執(zhí)行狀態(tài)
  };
  setTimeout(tasks,5000);
  return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("等待執(zhí)行!"); })
.fail(function(){ alert("出錯啦!"); });
//代碼的尾部加了一行dtd.resolve(),這就改變了dtd對象的執(zhí)行狀態(tài),因此導(dǎo)致done()方法立刻執(zhí)行
dtd.resolve();// 改變Deferred對象的執(zhí)行狀態(tài)

再看一個 Deferred對象返回deferred.promise()的例子:

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

  setTimeout(tasks,5000);
  return dtd.promise(); // 返回promise對象
};
$.when(wait())
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });

wait()函數(shù)返回的是promise對象。dtd.promise().resolve()方法不存在,因此無法改變狀態(tài),然后,我們把回調(diào)函數(shù)綁定在這個對象上面,而不是原來的deferred對象上面。

這樣的好處是,無法改變promise對象的執(zhí)行狀態(tài),要想改變執(zhí)行狀態(tài),只能操作原來的deferred對象。


deferred.notifyWith()

deferred.notifyWith() 函數(shù)用于給定上下文和參數(shù),傳遞給正在調(diào)用的延遲對象上進行的回調(diào)函數(shù)( progressCallbacks )。

注意:

  • 通常,只有延遲對象(Deferred)的創(chuàng)建者才能調(diào)用此方法。

  • 你可以通過調(diào)用 deferred.promise() 返回一個受限的 Promise 對象,來阻止其它代碼改變延遲對象的狀態(tài)或報告它的狀態(tài)。

  • 當(dāng) deferred.notifyWith 被調(diào)用時, 任何 progressCallbacks 可以通過訪問 deferred.then 或者 deferred.progress 來添加?;卣{(diào) 依照他們添加時的順序執(zhí)行。

通過 .notifyWith() 傳遞參數(shù)給每個回調(diào)函數(shù),當(dāng)遲延對象已經(jīng)被 resolved 或被
rejected 之后,再調(diào)用任何 .notifyWith() (或者添加 progressCallbacks) 都會被忽略。

語法

  • deferred.notifyWith( context [, args ] )

jQuery 1.7 新增該函數(shù)

參數(shù)說明

參數(shù)說明
contextObject類型 作為this對象,傳遞給進行中的回調(diào)(progressCallbacks)
argsArray類型 傳遞一個可選的參數(shù)給進行中的回調(diào)(progressCallbacks)

返回值

deferred.notifyWith() 返回的是一個 Deferred 對象


deferred.reject()

deferred.reject() 函數(shù)用于拒絕延遲對象,并根據(jù)給定的參數(shù)調(diào)用任何 failCallbacks 回調(diào)函數(shù)。

注意:

  • 通常只有延遲對象的創(chuàng)建者才可以調(diào)用該方法。你可以通過調(diào)用 deferred.promise(),返回一個受限的 Promise 對象,來阻止其它代碼改變延遲對象的狀態(tài)或報告它的狀態(tài)。

  • 當(dāng)延遲對象被 rejected 時,任何通過 deferred.then 或 deferred.fail 添加的 failCallbacks,都會被調(diào)用?;卣{(diào)函數(shù)按它們被添加時的順序執(zhí)行。傳遞給 deferred.reject() 的 args 參數(shù),會傳給每個回調(diào)函數(shù)。當(dāng)延遲對象進入 rejected 狀態(tài)后,任何 failCallbacks 被添加時,就會被立刻執(zhí)行,并帶上傳入給 .reject() 的參數(shù)。

語法

  • deferred.reject( args )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
argsObject類型 傳遞一個可選的參數(shù)給失敗的回調(diào)(failCallbacks)

返回值

deferred.reject() 返回的是一個 Deferred 對象


deferred.rejectWith()

deferred.rejectWith() 函數(shù)用于拒絕延遲對象,并根據(jù)給定的 context 和 args 參數(shù)調(diào)用任何 failCallbacks 回調(diào)函數(shù)。

注意:

  • 通常只有延遲對象的創(chuàng)建者才可以調(diào)用該方法。你可以通過調(diào)用 deferred.promise(),返回一個受限的 Promise 對象,來阻止其它代碼改變延遲對象的狀態(tài)或報告它的狀態(tài)。

  • 當(dāng)延遲對象被 rejected 時,任何通過 deferred.then 或 deferred.fail 添加的 failCallbacks,都會被調(diào)用?;卣{(diào)函數(shù)按它們被添加時的順序執(zhí)行。傳遞給 deferred.reject() 的 args 參數(shù), 會傳給每個回調(diào)函數(shù)。當(dāng)延遲對象進入 rejected 狀態(tài)后,任何 failCallbacks 被添加時,就會被立刻執(zhí)行,并帶上傳入給 .reject() 的參數(shù)。

語法

  • deferred.rejectWith( context [, args ] )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
contextObject類型 傳遞一個對象給失敗的回調(diào)(failCallbacks)
argsArray類型 傳遞一個可選的參數(shù)給失敗的回調(diào)(failCallbacks)

返回值

deferred.rejectWith() 返回的是一個 Deferred 對象


deferred.resolve()

deferred.resolve() 函數(shù)用于解決Deferred(延遲)對象,并根據(jù)給定的args參數(shù)給完成回調(diào)函數(shù)doneCallbacks 。

注意:

  • 通常只有延遲對象的創(chuàng)建者才可以調(diào)用該方法。你可以通過調(diào)用 deferred.promise(),返回一個受限的 Promise 對象,來阻止其它代碼改變延遲對象的狀態(tài)或報告它的狀態(tài)。

  • 當(dāng)延遲對象被 resolved 時,任何通過 deferred.then 或 deferred.done 添加的 doneCallbacks,都會被調(diào)用。回調(diào)函數(shù)按它們被添加時的順序執(zhí)行。傳遞給 deferred.resolve() 的 args 參數(shù), 會傳給每個回調(diào)函數(shù)。當(dāng)延遲對象進入 resolved 狀態(tài)后,任何 doneCallbacks 被添加時,就會被立刻執(zhí)行,并帶上傳入給 .resolve() 的參數(shù)。

語法

  • deferred.resolve( args )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
argsObject類型 傳遞一個可選的參數(shù)給完成回調(diào)函數(shù)(doneCallbacks)

返回值

deferred.resolve() 返回的是一個 Deferred 對象


deferred.resolveWith()

deferred.resolveWith() 函數(shù)用于解決Deferred(延遲)對象,并根據(jù)給定的 context 和 args 參數(shù)給完成回調(diào)函數(shù)doneCallbacks 。

注意:

  • 通常只有延遲對象的創(chuàng)建者才可以調(diào)用該方法。你可以通過調(diào)用 deferred.promise(),返回一個受限的 Promise 對象,來阻止其它代碼改變延遲對象的狀態(tài)或報告它的狀態(tài)。

  • 當(dāng)延遲對象被 resolved 時,任何通過 deferred.then 或 deferred.done 添加的 doneCallbacks,都會被調(diào)用。回調(diào)函數(shù)按它們被添加時的順序執(zhí)行。傳遞給 deferred.resolve() 的 args 參數(shù), 會傳給每個回調(diào)函數(shù)。當(dāng)延遲對象進入 resolved 狀態(tài)后,任何 doneCallbacks 被添加時,就會被立刻執(zhí)行,并帶上傳入給 .resolve() 的參數(shù)。

語法

  • deferred.resolveWith( context [, args ] )

jQuery1.5新增該函數(shù)

參數(shù)說明

參數(shù)說明
contextObject類型 傳遞上下文對象給完成回調(diào)函數(shù)(doneCallbacks)
argsArray類型 傳遞一個可選的參數(shù)給完成回調(diào)函數(shù)(doneCallbacks)

返回值

deferred.resolveWith() 返回的是一個 Deferred 對象


deferred.state()

deferred.state() 函數(shù)用于確定一個Deferred(延遲)對象的當(dāng)前狀態(tài)。

主要是用于調(diào)試,例如,在準備拒絕(reject)一個延遲對象前,判斷它是否已經(jīng)處于 resolved 狀態(tài)。

注意:
deferred.state() 方法返回一個字符串,代表Deferred(延遲)對象的當(dāng)前狀態(tài)。Deferred 對象可以在三種狀態(tài)之一:

  • pending” : Deferred 對象是尚未完成狀態(tài) 。

  • resolved” : Deferred 對象是在解決狀態(tài),這意味著對象的 deferred.resolve() 或者
    deferred.resolveWith()已被調(diào)用并且 doneCallbacks 已被調(diào)用(或在被調(diào)用的過程中)

  • rejected” : Deferred 對象是在被拒絕的狀態(tài),這意味著對象的 deferred.reject() 或者
    deferred.rejectWith() 已被調(diào)用并且 failCallbacks 已被調(diào)用(或在被調(diào)用的過程中) 。

語法

  • deferred.state()

jQuery1.7 新增該函數(shù)

返回值

deferred.state() 返回的是一個 String類型


deferred.pipe()

deferred.pipe() 函數(shù)用于過濾 and/or 鏈式延遲對象的工具方法。

注意:從jQuery 1.8開始, deferred.pipe() 方法過時。使用 deferred.then() 代替它。

從jQuery 1.8開始, deferred.pipe() 方法過時. 應(yīng)該使用deferred.then() 代替它。

deferred.pipe()方法返回一個新的Promise對象,用于過濾狀態(tài)或通過函數(shù)返回的延遲對象的值,傳遞給Promise對象對應(yīng)的done()、fail() 方法
doneFilter和failFilter函數(shù)過濾原先deferred(延遲)的解決/拒絕的狀態(tài)和值。
從 jQuery 1.7開始,該方法還接受一個progressFilter函數(shù),用來過濾任何訪問deferred(延遲)的notify或notifyWith 方法。

這些過濾器可以隨著 pipe()返回的 promise 對象的 done()或fail() 回調(diào)函數(shù)的調(diào)用,返回一個新值,或返回其它可見對象(Deferred, Promise, 等等),這些可見對象傳遞了自身的解決(resolve) / 拒絕(reject)狀態(tài)和傳遞給 pipe promise 回調(diào)函數(shù)的返回的值。

如果將 null 作為過濾函數(shù),或者不指定過濾函數(shù),那么 pipe promise 被受理(resolve)或被拒絕(reject)時,會使用相同的值作為原始值。

語法

  • deferred.pipe( [doneFilter ] [, failFilter ] )

jQuery1.6新增該函數(shù),1.8過時

  • deferred.pipe( [doneFilter ] [, failFilter ] [, progressFilter ] )

jQuery1.7新增該函數(shù),1.8過時

參數(shù)說明

參數(shù)說明
doneFilterFunction類型 可選函數(shù),當(dāng)延遲得到解決時調(diào)用
failFilterFunction類型 可選函數(shù),當(dāng)延遲被拒絕時調(diào)用
progressFilterFunction類型 可選函數(shù),當(dāng)進度通知發(fā)送給Deferred(延遲)被調(diào)用

返回值

deferred.pipe() 返回的是一個 * Promise對象*

示例&說明

過濾解決值:

var defer = $.Deferred(),
   filtered = defer.pipe(function( value ) {//當(dāng)延遲對象解決時被調(diào)用
       // 傳遞給 pipe promise 回調(diào)函數(shù)的返回的值為10
        return value * 2;
    });
defer.resolve( 5 );//延遲對象被解決  調(diào)用pipe() return 10
filtered.done(function( value ) {//filtered 傳遞之前返回的值 10
    alert( "值是(2*5 =) 10: " + value );//彈出框輸出:值是(2*5 =) 10:10
});

過濾拒絕值:

var defer = $.Deferred(),
//延遲得到解決時調(diào)用回調(diào)函數(shù)為null
//延遲得到拒絕的回調(diào)函數(shù)傳遞值value * 3 給Promise對象filtered 的fail的回調(diào)函數(shù)
        filtered = defer.pipe( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延遲對象被拒絕 調(diào)用pipe() return 18
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//彈出框輸出:值是(3*6 =) 18:18
    });

鏈任務(wù)(?)

var request = $.ajax( url, { dataType: "json" } ),
    chained = request.pipe(function( data ) {
        //request返回值給url2
        return $.ajax( url2, { data: { user: data.userId } } );
    });

    chained.done(function( data ) {
        // 通過第一個請求取回data值提供給URL2
    });


deferred.then()

deferred.then() 函數(shù)當(dāng)Deferred(延遲)對象被解決/拒絕或仍在進行中時,調(diào)用添加處理程序。

注意:

  • 如果沒有這種類型的回調(diào)是需要的,參數(shù)可以為 null ?;蛘呤褂?done(),.fail()或者 .progress()設(shè)置只有一種未經(jīng)過濾的狀態(tài)或值的回調(diào)類型。

  • 從jQuery 1.8開始, 方法返回一個新的 promise ,可以通過一個函數(shù)過濾延遲對象的狀態(tài)和值,用來替換現(xiàn)在過時的deferred.pipe() 方法。

  • 回調(diào)是依照他們被添加時的順序執(zhí)行的,由于 deferred.then 返回 Promise 對象,可以鏈接其它的 Promise 對象,包括附加的 .then() 方法。

doneFilter 和 failFilter函數(shù)過濾原延遲對象的解決/拒絕的狀態(tài)和值。
progressFilter 函數(shù)過濾任何調(diào)用原有的延遲對象的notify 和 notifyWith的方法。
這些過濾器函數(shù)可以返回一個新的值傳遞給的 Promise 對象的.done() 或 .fail() 回調(diào),或他們可以返回另一個觀察的對象(延遲對象,Promise 對象等)傳遞給它的解決/拒絕的狀態(tài)和值,Promise 對象的回調(diào)。
如果過濾函數(shù)是空,或沒有指定,promise(承諾)將得到與原來值相同解決(resolved)或拒絕(rejected)。

語法

  • deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

    jQuery1.8新增該函數(shù)

  • deferred.then1.8-( doneCallbacks, failCallbacks)

    jQuery1.5新增該函數(shù),1.8移除

  • deferred.then1.8-( doneCallbacks, failCallbacks[, progressFilter ] )

    jQuery1.7新增該函數(shù),1.8移除

參數(shù)說明

參數(shù)說明
doneFilterFunction類型 可選 當(dāng)Deferred(延遲)對象得到解決時被調(diào)用的一個函數(shù)
failFilterFunction類型 可選 當(dāng)Deferred(延遲)對象得到拒絕時被調(diào)用的一個函數(shù)
progressFilterFunction類型 可選 當(dāng)Deferred(延遲)對象生成進度通知時被調(diào)用的一個函數(shù)調(diào)用
doneCallbacksFunction類型 當(dāng)Deferred(延遲)對象得到解決時被調(diào)用的一個函數(shù)或函數(shù)數(shù)組
failCallbacksFunction類型 當(dāng)Deferred(延遲)對象得到拒絕時被調(diào)用的一個函數(shù)或函數(shù)數(shù)組
progressCallbacksFunction類型 當(dāng)Deferred(延遲)對象生成進度通知時被調(diào)用的一個函數(shù)或函數(shù)數(shù)組

返回值

deferred.then() 返回 Promise 對象

示例&說明

HTML代碼:

<button>過濾解決值</button>
<p></p>

過濾解決值:

var filterResolve = function() {
    var defer = $.Deferred(),
        //當(dāng)延遲對象解決時被調(diào)用
        //過濾解決值給then()的返回Promise對象的完成回調(diào)函數(shù)
        filtered = defer.then(function( value ) {
            return value * 2;
        });

    defer.resolve( 5 );

    //添加Promise對象的完成回調(diào)函數(shù)
    filtered.done(function( value ) {
        $( "p" ).html( "值是 ( 2*5 = ) 10: " + value );
    });
};
$( "button" ).on( "click", filterResolve );

過濾拒絕值:

var defer = $.Deferred(),
//延遲得到解決時調(diào)用回調(diào)函數(shù)為null
//延遲得到拒絕的,回調(diào)函數(shù)過濾拒絕值 
//傳遞過濾的拒絕值 value * 3 給then()的返回Promise對象的拒絕回調(diào)函數(shù)fail
        filtered = defer.then( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延遲對象被拒絕 調(diào)用then() return 18

    //then()的返回Promise對象添加拒絕回調(diào)函數(shù),并獲取過濾的拒絕值
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//彈出框輸出:值是(3*6 =) 18:18
    });

鏈任務(wù)(?)

var request = $.ajax( url, { dataType: "json" } ),
    chained = request.then(function( data ) {
        //request返回值給url2
        return $.ajax( url2, { data: { user: data.userId } } );
    });

    chained.done(function( data ) {
        // 通過第一個請求取回data值提供給URL2
    });


deferred.catch()

當(dāng)Deferred對象被拒絕(reject)時,調(diào)用通過deferred.catch()添加的處理程序。

deferred.catch( fn ) 是 deferred.then( null, fn )的一個別名

語法

  • deferred.catch( failCallbacks )

jQuery 3.0 新增該函數(shù)

參數(shù)說明

參數(shù)說明
failCallbacksFunction類型 一個函數(shù),當(dāng) Deferred 對象被拒絕(reject)時被調(diào)用

返回值

deferred.catch() 返回的是一個 Promise 對象

示例&說明

jQuery.get 方法返回一個jqXHR對象, 它是從Deferred對象派生的,當(dāng)Deferred對象被拒絕(reject) 時,我們可以使用.catch方法來處理,jQuery示例代碼:

$.get( "test.php" )
  .then( function() {
    alert( "$.get succeeded" );
  } )
  .catch( function() {
    alert( "$.get failed!" );
  } );


deferred.promise()

deferred.promise() 函數(shù)返回 Deferred(延遲)的 Promise 對象。

注意:

  • 方法允許一個異步函數(shù)阻止那些干涉其內(nèi)部請求的進度(progress)或狀態(tài)(status)的其它代碼。

  • Promise 對象只包含 deferred 對象的一組方法,包括:done(),then(),fail(),isResolved(), isRejected(), always(), 這些方法只能觀察一個 deferred 的狀態(tài);不包括任何用于改變狀態(tài)的延遲方法(resolve, reject, notify, resolveWith, rejectWith, 和 notifyWith),因此Promise 對象無法更改 deferred 對象的內(nèi)在狀態(tài)

  • deferred.promise()也可以接受一個 target 參數(shù),此時傳入的 target 將被賦予 Promise 的方法,并作為結(jié)果返回,而不是創(chuàng)建一個新對象(這個方法可以用于在已經(jīng)存在的對象上綁定 Promise 行為的情況)。

語法

  • deferred.promise( [target ] )

jQuery 1.5 新增該函數(shù)

參數(shù)說明

參數(shù)說明
targetObject類型 綁定 promise 方法的對象。

返回值

deferred.promise() 返回的是一個 Promise 對象

示例&說明

創(chuàng)建一個延遲對象,并設(shè)定兩個延時時間是隨機的定時器,分別用于受理(resolve)和拒絕(reject)延遲對象。無論哪一個先執(zhí)行,都會調(diào)用其中一個回調(diào)函數(shù)。而另一個定時器則不會產(chǎn)生任何效果,因為在最先調(diào)用的那個定時器處理中,延遲對象已經(jīng)處于完成狀態(tài)(resolved 或 rejected 狀態(tài))。同時,還會設(shè)定一個定時器進度(progress)通知函數(shù),用于進度通知處理,并在文檔的 “body” 中顯示 “working…”,以下為一次測試時的jQuery示例代碼:

function asyncEvent(){
        var dfd = new jQuery.Deferred();

        var resolveValue=400+Math.random()*2000;
        var resolveTime=Math.floor(resolveValue)
        console.log("resolveTime"+resolveTime)//resolveTime:1890ms

        // 在一個隨機的時間間隔之后 Resolve (解決狀態(tài))
        setTimeout(function(){
            dfd.resolve("歡呼");

        }, Math.floor(resolveTime));

        var rejectValue=400+Math.random()*2000;
        var rejectTime=Math.floor(rejectValue)
        console.log("rejectTime"+rejectTime)//rejectTime:1364ms

        // 在一個隨機的時間間隔之后 reject (拒絕狀態(tài))
        setTimeout(function(){
            dfd.reject("對不起");
        },rejectTime);

        // 每半秒顯示一個"working..."消息
        setTimeout(function working(){
            //"pending" : Deferred 對象是尚未完成狀態(tài)
            //0ms 執(zhí)行一次  500ms執(zhí)行一次 1000ms執(zhí)行一次
            //1364ms 執(zhí)行  dfd.reject("對不起") 
            //傳遞拒絕值"對不起" 給拒絕過濾函數(shù) alert( status+', 這次你失敗了' );
            if ( dfd.state() === "pending" ) {
                //向正在執(zhí)行的Deferred 對象的回調(diào)函數(shù)列表傳遞參數(shù)
                dfd.notify("working... ");

                setTimeout(working, 500);
            }
        }, 1);

        // 返回 Promise 對象,調(diào)用者不能改變延遲對象
        return dfd.promise();
    }
    // 為異步函數(shù)附加一個done, fail, 和 progress 處理程序
//如果向 jQuery.when 傳入一個延遲對象,那么會返回它的 Promise 對象(延遲方法的一個子集)
    $.when( asyncEvent() ).then(
        function(status){
            alert( status+', 事情進展順利' );
        },
        function(status){
            alert( status+', 這次你失敗了' );
        },
        function(status){
            $("body").append(status);
        }
    );

使用目標參數(shù),產(chǎn)生現(xiàn)有對象的Promise對象:

// 現(xiàn)有對象
    var obj = {
        hello: function( name ) {
            alert( "Hello " + name );
        }
    },
    // 創(chuàng)建一個延遲 Deferred
    defer = $.Deferred();
    // 設(shè)置對象作為 promise
    defer.promise( obj );
    // Resolve (解決) 該對象
    defer.resolve( "John" );
    // 使用該對象作為 Promise,向受理列表中添加回調(diào)函數(shù)
    //延遲對象狀態(tài)為解決,因此done 被調(diào)用
    obj.done(function( name ) {
        obj.hello( name ); //將彈出 "Hello John"
    }).hello( "Karl" ); // 將彈出 "Hello Karl";


.promise()

.promise() 函數(shù)返回一個 Promise 對象,觀察某種類型被綁定到集合的所有行動,是否已被加入到隊列中。

返回的 Promise 被鏈接到延遲對象上,保存在元素的 .data() 中。由于 .remove() 方法會移除元素上的 data,同時也會移除元素本身。所以,使用它會防止任何元素上未被受理的(unresolved) Promise 被受理(resolving)。如果有必要在元素的 Promise 被受理(resolved)之前,從 DOM 中移除該元素的話,請使用.detach() 來代替。之后再調(diào)用 .removeData()

注意:

  • .promise() 方法返回一個動態(tài)生成的 Promise,當(dāng)綁定到集合中的所有特定動作(action)已經(jīng)被加入或未被加入到隊列中時,生成的 Promise 將被受理(resolve)。

語法

  • .promise( [type ] [, target ] )

jQuery 1.5新增

參數(shù)說明

參數(shù)說明
type可選/String類型 需要待觀察隊列類型。
target可選/PlainObject類型 將要綁定 promise 方法的對象。

默認情況下, type的值是”fx” ,這意味著返回被受理(resolve)的 Promise 對象的時機,是在所有被選中元素的動畫都完成時發(fā)生的。

如果提供target參數(shù),.promise()在該參數(shù)上添加方法,然后返回這個對象,而不是創(chuàng)建一個新的。它適用于在一個已經(jīng)存在的對象上添加 Promise 行為的情況。

返回值

.promise()方法返回一個動態(tài)生成的 Promise對象。

示例&說明

1.在一個沒有激活動畫的集合上調(diào)用 .promise()
相關(guān)的jQuery示例代碼:

//在一個沒有激活動畫的集合上調(diào)用 .promise(),返回一個被受理(resolved)的 Promise
var div = $( "<div />" );
    div.promise().done(function( arg1 ) {
        //彈出 "true"
        alert( this === div && arg1 === div );
    });

2.當(dāng)所有的動畫結(jié)果時(包括那些在動畫回調(diào)函數(shù)和之后添加的回調(diào)函數(shù)中初始化的動畫),受理(Resolve)返回的 Promise,相關(guān)HTML代碼 :

<style type="text/css">
//沒有樣式不易觀察執(zhí)行效果,因此添加樣式設(shè)置
    div{
        height:100px;
        width:200px;
        border:2px solid #334455;
        margin-top:2px;
    }
</style>
<button>Go</button>
<p>準備...</p>
<div></div>
<div></div>
<div></div>
<div></div>

當(dāng)所有的動畫結(jié)果時(包括那些在動畫回調(diào)函數(shù)和之后添加的回調(diào)函數(shù)中初始化的動畫),受理(Resolve)返回的 Promise,相關(guān)jQuery代碼

$( "button" ).on( "click", function() {
        $( "p" ).append( "已開始..." );

        $( "div" ).each(function( i ) {
            $( this ).fadeIn().fadeOut( 100 * ( i + 51 ) );
        });

        $( "div" ).promise().done(function() {
            $( "p" ).append( " 完成! " );
        });
    });
    //效果顯示好像是等動畫執(zhí)行完成后才執(zhí)行done()方法

使用 $.when() 語句(.promise() 方法使得在 jQuery 集合中實現(xiàn)它變成了可能),受理(Resolve)返回的 Promise

var effect = function() {
        return $("div").fadeIn(800).delay(1200).append(" fadeOut! ").fadeOut();
    };
    $("button").bind( "click", function() {
        $("p").append( " 已開始... ");
        $.when( effect() ).done(function() {
            $("p").append(" 完成! ");
        });
        //效果顯示好像是等動畫執(zhí)行完成后才執(zhí)行done()方法
    });

到此,關(guān)于“jquery延遲對象怎么使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI