jquery延遲物件是什麼-前端問答-PHP中文網

首頁

web前端

前端問答

jquery延遲物件是什麼

青灯夜游

Nov 02, 2022 pm 05:58 PM

jquery延遲對象

jquery延遲物件是“Deferred”，是透過呼叫jQuery.Deferred()方法來建立的可連結的實用物件。延遲物件是可連結的，類似於一個jQuery物件可連結的方式，區別於它有自己的方法；它可註冊多個回調函數到回呼列表，調用回調列表並且傳遞非同步或同步功能的成功或失敗的狀態。

jquery延遲物件是什麼

本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

jQuery 1.5中介紹了 Deferred 延遲對象，它是透過呼叫 jQuery.Deferred() 方法來建立的可連結的實用對象。它可註冊多個回呼函數到回呼列表，呼叫回呼列表並且傳遞非同步或同步功能的成功或失敗的狀態。

延遲物件是可連結的，類似於一個 jQuery 物件可連結的方式，區別於它有自己的方法。在建立 Deferred 物件之後，您可以使用以下任何方法，直接連結到透過呼叫一個或多個的方法來建立或儲存的物件。

列表

#$.Deferred()用來傳回一個鍊式實用物件方法來註冊多個回調，並且呼叫回調佇列，傳遞任何同步或非同步功能成功或失敗的狀態。 deferred.always()用於當Deferred（延遲）物件被受理或被拒絕時，呼叫新增的處理程序deferred.done()用於當Deferred（延遲）物件被受理時，呼叫新增的處理程序deferred.fail() 用於當Deferred （延遲）物件被拒絕時，呼叫新增的處理程序#deferred.progress()用於當Deferred （延遲）物件產生進度通知時，呼叫新增處理程序#用來決定Deferred 物件是否已被拒絕用來決定Deferred物件是否已被拒絕deferred.notify()#用於傳遞參數給進行中的回調deferred .notifyWith()用於傳遞參數，上下文物件給進行中的回調deferred.reject()用於拒絕延遲對象，並傳遞參數給失敗回呼函數deferred.rejectWith()用於拒絕延遲對象，並傳遞參數和上下文對象給失敗回呼函數deferred.resolve()用於解決延遲對象，並並傳遞參數給doneCallbacks 回呼函數deferred.resolveWith( )用於解決延遲對象，並並傳遞參數和上下文對象給doneCallbacks 回調函數deferred.state()用於確定一個Deferred（延遲）物件的目前狀態用於過濾狀態或透過函數傳回的延遲物件的值deferred.then()用於當Deferred（延遲）物件被解決，拒絕或仍在進行中時，呼叫新增處理程序。 deferred.catch()用於當Deferred物件被拒絕(reject)時，呼叫新增的處理程序。 deferred.promise()用於傳回Deferred(延遲)的Promise 物件.promise()用於傳回一個Promise 對象，觀察某種類型被綁定到集合的所有行動，是否已加入到佇列中。

函數





deferred.isRejected()	1.8-
deferred.isResolved()	1.8-







	deferred.pipe()

#########

說明

$.Deferred()

$.Deferred() 是建構函數，用來傳回一個鍊式實用物件方法來註冊多個回調，並且呼叫回調佇列，傳遞任何同步或非同步功能成功或失敗的狀態。

提示：

$.Deferred() 建構子建立一個新的Deferred（延遲）對象， jQuery.Deferred
可傳遞一個可選的函數，該函數在建構方法返回之前被呼叫並傳遞一個新的Deferred 物件作為函數的第一個參數。例如被呼叫的函數可以使用 deferred.then（）來附加回呼函數。
一個 Deferred 物件開始於掛起狀態。任何使用 deferred.then(), deferred.always(),
deferred.done(), 或 deferred.fail() 加到這個物件的回呼函數都是排隊等待執行的。

呼叫 deferred.resolve() 或 eferred.resolveWith() 轉換延遲到解決狀態後立即執行設定的
doneCallbacks 。
呼叫 deferred.reject() 或 deferred.rejectWith() 轉換延遲到拒絕狀態後立即執行設定的 failCallbacks 。一旦物件已經進入了解決或拒絕狀態，它保持該狀態。回調仍然可以添加到已解決或拒絕的 Deferred 物件——它們會立即執行。

語法

$.Deferred( [beforeStart ] )

jQuery1.5新增此函數

#參數說明

##beforeStart

參數	說明
beforeStart

Function類型

個在建構函式傳回之前呼叫的函式

#傳回值jQuery.Deferred()工廠函式創建一個新的deferred物件。

deferred.always()

#當Deferred（延遲）物件被接受或被拒絕時，呼叫透過deferred.always () 新增的處理程序。

提示：參數可以是一個函數或一個函數陣列。由於 deferred.always() 傳回的是一個 Deferred 對象，所以可以連接其他的延遲物件方法(

)，包括額外的 .always 方法。當 Deferred 物件解決或被拒絕時，透過deferred.always() 新增的回呼函數會依照它們被新增時的順序執行，並且可以作為參數傳遞給如下的方法：resolve ， reject ， resolveWith 或 rejectWith。

語法

deferred.always( alwaysCallbacks [, alwaysCallbacks ] )

jQuery1.6新增此函數參數說明alwaysCallbacks

	#參數說明

可選/Function類型

一個函數或函數數組，當Deferred（延遲）物件被解決或被拒絕時被呼叫

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

傳回值

deferred.always()傳回Deferred（延遲）物件範例&說明jQuery.get（）方法傳回一個來自一個Deferred（延遲）物件的jqXHR對象，我們可以附加一個成功和錯誤使用deferred.always（）方法的回調,jQuery範例程式碼:

 $.get( "test.php" ).always(function() {
    alert( "带有成功和错误的回调参数的$.get方法已完成。" );
 })

deferred .done()

當Deferred（延遲）物件被受理時，呼叫

新增的處理程序。

提示：此方法接受一個或多個參數。 deferred.done() 傳回的是一個 Deferred 對象，可以連接其他的延遲物件方法（繼續呼叫Deferred 物件的方法），包括額外的 .done() 方法。當Deferred 物件解決時，透過deferred.done()新增的回呼函數會依照它們被新增時的順序執行，並且可以作為參數傳遞給如下的方法使用：resolve，resolveWith。

語法

deferred.done( doneCallbacks [, doneCallbacks ] )

jQuery1.5新增此函數參數說明doneCallbacks

	#參數說明

######可選/Function類型### 一個函數或函數數組，當Deferred（延遲）物件解決時被呼叫#############

返回值

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();//创建一个延迟对象

//添加dfd被解决时需要的被调用的处理函数
dfd
.done( [fn1, fn2], fn3, [fn2, fn1] )// 连接一个函数或者函数数组
.done(function(n) {//可以连接其他的方法
  $("p").append(n + " we&#39;re done.");
});

//当点击按钮时修改延迟对象的状态为已解决
//此时调用通过deferred.done()添加的延迟对象被受理后的处理函数
$("button").bind("click", function() {
  dfd.resolve("and");//输出：1 2 and 3 and 2 1 and we&#39;re done.
});

deferred.fail()

当 Deferred （延迟）对象被拒绝时，调用通过deferred.fail()添加的处理程序。

提示：该方法接受一个或者多个参数。 deferred.fail() 返回的是一个 Deferred 对象，可以连接其他的延迟对象方法（继续调用其他Deferred 对象的方法），包括额外的 .fail() 方法。当 Deferred 对象被拒绝时，通过deferred.fail()添加的回调函数按它们被添加时的顺序执行，并且可以作为参数传递给如下的方法使用：deferred.resolve() 或 deferred.rejectWith()。

语法

deferred.fail( failCallbacks [, failCallbacks ] )

jQuery1.5新增该函数

参数说明

参数	说明
failCallbacks	可选/Function类型一个函数或者函数数组，当Deferred（延迟）对象被拒绝时被调用

返回值

deferred.fail() 返回的是一个 Deferred 对象

示例&说明

jQuery示例代码

$(function () { 
    $.get("test.php")
        .done(function(){ alert("$.get 成功！"); })//解决时调用
        .fail(function(){ alert("$.get 失败!"); });//被拒绝时调用
})

deferred.progress()

deferred.progress() 函数当Deferred（延迟）对象生成进度通知时，调用添加处理程序。

注意：当通过调用 notify 或 notifyWith 使延迟对象产生进度通知时，progressCallbacks 就会被调用。由于 deferred.progress()返回的是延迟对象，所以其它延迟对象方法可以链接到该对象上(链式调用)。当延迟对象被 resolved 或 rejected 时，进度回调函数将不再被调用,但是当Deferred （延迟）进入resolved（解决）或 rejected（拒绝）状态后，新添加任何的progressCallbacks将立即执行，使用的参数被传递给.notify() 或 notifyWith()调用

语法

deferred.progress( progressCallbacks[,progressCallbacks] )

jQuery 1.7 新增该函数

参数说明

参数	说明
progressCallbacks	可选/Function类型一个函数或者函数数组，当Deferred（延迟）对象生成正在执行中的进度通知时被调用。

傳回值

deferred.progress() 傳回的是一個Deferred 物件

deferred.isRejected( )

deferred.isRejected() 函數用來確定Deferred 物件是否已被拒絕。

從jQuery1.7開始已經過時，請使用 deferred.state() 來取代。

注意：

如果 Deferred（延遲）物件是在被拒絕的狀態，則傳回 true。這表示 deferred.reject() 或deferred.rejectWith() 已經在物件上被呼叫過，並且 failCallbacks 已經被呼叫過（或正處於被呼叫的階段）。
Deferred（延遲）物件可以有三種狀態：掛起（pending），解決（resolved），或拒絕（rejected）;使用 deferred.isResolved() 來判斷延遲物件是否在解決狀態。

語法

deferred.isRejected()

jQuery 1.5 新增此函數,1.7過時，1.8移除

傳回值

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

# #deferred.isResolved()

deferred.isResolved() 函數用來判斷Deferred 物件是否已解決。

從jQuery1.7開始已經過時，請使用 deferred.state() 來取代。

注意：

Deferred（延遲）物件可以有三種狀態：掛起（pending），解決（resolved），或拒絕（rejected）;使用 deferred.isRejected() 來判斷延遲物件是否在拒絕狀態。

語法

jQuery 1.5 新增該函數,1.7過時，1.8移除

傳回值

deferred.isResolved() 回傳的是一個

Boolean類型

# #deferred.notify()deferred.notify() 函數用來定一個參數，傳遞給正在呼叫的延遲物件上的回呼函數( progressCallbacks )。

注意：

通常，只有延遲物件（Deferred）的創建者才能呼叫此方法。

你可以透過呼叫 deferred.promise() 傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
當 deferred.notify 被存取時，任何 progressCallbacks 可以透過存取 deferred.then 或 deferred.progress 來新增。回調依照他們加入時的順序執行。

透過來自.notify()的傳遞參數給正在呼叫的延遲物件上的回呼函數，當遲延物件已經被

resolved 或被rejected 之後，再呼叫任何. notify() (或加入progressCallbacks) 都會 被忽略 #文法

deferred.notify( args )

#jQuery 1.7 新增函數

參數說明

參數##說明##args可選/Object類型

傳遞一個可選的參數給進行中的回呼（progressCallbacks）

返回值

deferred.notify() 返回的是一个 Deferred 对象

小知识

jQuery提供的deferred.promise()方法的作用是，在原来的Deferred 对象上返回另一个 Deferred 对象，即受限制的 Promise 对象，受限制的 Promise 对象只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。

首先看一个 Deferred对象的执行状态被改变的例子：

var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕！");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,5000);
  return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("等待执行！"); })
.fail(function(){ alert("出错啦！"); });
//代码的尾部加了一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立刻执行
dtd.resolve();// 改变Deferred对象的执行状态

再看一个 Deferred对象返回deferred.promise()的例子：

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

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

wait()函数返回的是promise对象。dtd.promise().resolve()方法不存在,因此无法改变状态，然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。

这样的好处是，无法改变promise对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。

deferred.notifyWith()

deferred.notifyWith() 函数用于给定上下文和参数，传递给正在调用的延迟对象上进行的回调函数( progressCallbacks )。

注意：

通常，只有延迟对象（Deferred）的创建者才能调用此方法。
你可以通过调用 deferred.promise() 返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。
当 deferred.notifyWith 被调用时，任何 progressCallbacks 可以通过访问 deferred.then 或者 deferred.progress 来添加。回调依照他们添加时的顺序执行。

通过 .notifyWith() 传递参数给每个回调函数，当迟延对象已经被 resolved 或被 rejected 之后，再调用任何 .notifyWith() (或者添加 progressCallbacks) 都会被忽略。

语法

deferred.notifyWith( context [, args ] )

jQuery 1.7 新增该函数

参数说明

参数	说明
context	Object类型作为this对象，传递给进行中的回调（progressCallbacks）
args	Array类型传递一个可选的参数给进行中的回调（progressCallbacks）

返回值

deferred.notifyWith() 返回的是一个 Deferred 对象

deferred.reject()

deferred.reject() 函数用于拒绝延迟对象，并根据给定的参数调用任何 failCallbacks 回调函数。

注意：

通常只有延迟对象的创建者才可以调用该方法。你可以通过调用 deferred.promise()，返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。
当延迟对象被 rejected 时，任何通过 deferred.then 或 deferred.fail 添加的 failCallbacks，都会被调用。回调函数按它们被添加时的顺序执行。传递给 deferred.reject() 的 args 参数，会传给每个回调函数。当延迟对象进入 rejected 状态后，任何 failCallbacks 被添加时，就会被立刻执行，并带上传入给 .reject() 的参数。

语法

deferred.reject( args )

jQuery1.5新增该函数

参数说明

参数	说明
args	Object类型传递一个可选的参数给失败的回调（failCallbacks）

傳回值

deferred.reject() 傳回的是一個Deferred 物件

deferred.rejectWith( )

deferred.rejectWith() 函數用於拒絕延遲對象，並根據給定的context 和args 參數呼叫任何failCallbacks 回呼函數。

注意：

通常只有延遲物件的創建者才可以呼叫該方法。你可以透過呼叫 deferred.promise()，傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
當延遲物件被 rejected 時，任何透過 deferred.then 或 deferred.fail 新增的 failCallbacks，都會被呼叫。回調函數會依照它們被加入時的順序執行。傳遞給 deferred.reject() 的 args 參數，會傳給每個回呼函數。當延遲物件進入 rejected 狀態後，任何 failCallbacks 被加入時，就會立刻執行，並帶上傳入給 .reject() 的參數。

語法

deferred.rejectWith( context [, args ] )

jQuery1.5新增此函數

參數說明

參數
# context	Object類型傳遞一個物件給失敗的回呼（failCallbacks）
args	Array類型傳遞一個可選的參數給失敗的回呼（failCallbacks）

#傳回值

deferred.rejectWith() 回傳的是一個 Deferred 物件

deferred.resolve()

deferred.resolve() 函式用於解決Deferred（延遲）對象，並根據給定的args參數給完成回調函數doneCallbacks 。

注意：

通常只有延遲物件的創建者才可以呼叫該方法。你可以透過呼叫 deferred.promise()，傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
當延遲物件被 resolved 時，任何透過 deferred.then 或 deferred.done 新增的 doneCallbacks，都會被呼叫。回調函數會依照它們被加入時的順序執行。傳遞給 deferred.resolve() 的 args 參數，會傳給每個回呼函數。當延遲物件進入 resolved 狀態後，任何 doneCallbacks 被加入時，就會立刻執行，並帶上傳入給 .resolve() 的參數。

語法

deferred.resolve( args )

jQuery1.5新增此函數

#參數說明

參數	說明
args	Object類型傳遞一個可選的參數給完成回呼函數（doneCallbacks）

傳回值

deferred.resolve () 傳回的是一個Deferred 物件

#deferred.resolveWith()

deferred.resolveWith() 函數用於解決Deferred（延遲）對象，並根據給定的context 和args 參數給完成回調函數doneCallbacks 。

注意：

通常只有延遲物件的創建者才可以呼叫該方法。你可以透過呼叫 deferred.promise()，傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
當延遲物件被 resolved 時，任何透過 deferred.then 或 deferred.done 新增的 doneCallbacks，都會被呼叫。回調函數會依照它們被加入時的順序執行。傳遞給 deferred.resolve() 的 args 參數，會傳給每個回呼函數。當延遲物件進入 resolved 狀態後，任何 doneCallbacks 被加入時，就會立刻執行，並帶上傳入給 .resolve() 的參數。

語法

deferred.resolveWith( context [, args ] )

jQuery1.5新增此函數

參數說明

參數
# context	Object類型傳遞上下文物件給完成回呼函數（doneCallbacks）
args	Array類型傳遞一個可選的參數給完成回呼函數（doneCallbacks）

傳回值

deferred.resolveWith() 傳回的是一個Deferred 物件

deferred.state( )

deferred.state() 函數用來決定一個Deferred（延遲）物件的目前狀態。

主要是用於偵錯，例如，在準備拒絕（reject）一個延遲物件前，判斷它是否已經處於 resolved 狀態。

注意：
deferred.state() 方法傳回字串，代表Deferred（延遲）物件的目前狀態。 Deferred 物件可以在三種狀態之一：

「pending」 : Deferred 物件是尚未完成狀態。
“resolved” : Deferred 物件是在解決狀態，這表示物件的deferred.resolve() 或
deferred.resolveWith()已被呼叫並且doneCallbacks 已被呼叫（或在被呼叫的過程中）
“rejected” : Deferred 物件是在被拒絕的狀態，這表示物件的deferred.reject() 或
deferred. rejectWith() 已被呼叫並且failCallbacks 已被呼叫（或在被呼叫的過程中）。

語法

deferred.state()

#jQuery1.7 新增此函數

傳回值

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

deferred.pipe() 

deferred.pipe() 函數用於過濾and/or 鍊式延遲物件的工具方法。

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

從jQuery 1.8開始, deferred.pipe() 方法過時. 應該使用deferred.then() 來取代它。

deferred.pipe()方法返回一個新的Promise對象，用於過濾狀態或透過函數返回的延遲對象的值，傳遞給Promise對象對應的done()、fail() 方法
doneFilter和failFilter函數過濾原先deferred（延遲）的解決/拒絕的狀態和值。
從 jQuery 1.7開始,該方法也接受一個progressFilter函數，用來過濾任何存取deferred（延遲）的notify或notifyWith 方法。

這些過濾器可以隨著pipe()返回的promise 物件的done()或fail() 回呼函數的調用，返回一個新值，或返回其它可見物件(Deferred, Promise, 等等) ，這些可見物件傳遞了自身的解決（resolve) / 拒絕(reject)狀態和傳遞給pipe promise 回呼函數的傳回的值。

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

語法

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

##jQuery1.6新增此函數,1.8過時

jQuery1.7新增此函數，1.8過時

參數說明

參數#說明doneFilterfailFilterprogressFilter

返回值

deferred.pipe() 返回的是一个 * Promise对象*

示例&说明

过滤解决值:

var defer = $.Deferred(),
   filtered = defer.pipe(function( value ) {//当延迟对象解决时被调用
       // 传递给 pipe promise 回调函数的返回的值为10
        return value * 2;
    });
defer.resolve( 5 );//延迟对象被解决  调用pipe() return 10
filtered.done(function( value ) {//filtered 传递之前返回的值 10
    alert( "值是(2*5 =) 10: " + value );//弹出框输出：值是(2*5 =) 10:10
});

过滤拒绝值:

var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的回调函数传递值value * 3 给Promise对象filtered 的fail的回调函数
        filtered = defer.pipe( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延迟对象被拒绝 调用pipe() return 18
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
    });

链任务（？）：

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() 函数当Deferred（延迟）对象被解决/拒绝或仍在进行中时，调用添加处理程序。

注意：

如果没有这种类型的回调是需要的,参数可以为 null 。或者使用.done()，.fail()或者 .progress()设置只有一种未经过滤的状态或值的回调类型。
从jQuery 1.8开始, 方法返回一个新的 promise ，可以通过一个函数过滤延迟对象的状态和值，用来替换现在过时的deferred.pipe() 方法。
回调是依照他们被添加时的顺序执行的，由于 deferred.then 返回 Promise 对象，可以链接其它的 Promise 对象，包括附加的 .then() 方法。

doneFilter 和 failFilter函数过滤原延迟对象的解决/拒绝的状态和值。
progressFilter 函数过滤任何调用原有的延迟对象的notify 和 notifyWith的方法。
这些过滤器函数可以返回一个新的值传递给的 Promise 对象的.done() 或 .fail() 回调，或他们可以返回另一个观察的对象（延迟对象，Promise 对象等）传递给它的解决/拒绝的状态和值,Promise 对象的回调。
如果过滤函数是空，或没有指定，promise（承诺）将得到与原来值相同解决（resolved）或拒绝（rejected）。

语法

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

jQuery1.8新增该函数
deferred.then^1.8-( doneCallbacks, failCallbacks)

jQuery1.5新增该函数,1.8移除
deferred.then^1.8-( doneCallbacks, failCallbacks[, progressFilter ] )

jQuery1.7新增该函数,1.8移除

参数说明


	Function類型可選函數，當延遲得到解決時呼叫
	Function類型可選函數，當延遲被拒絕時呼叫
	Function類型可選函數，當進度通知傳送給Deferred（延遲）被呼叫

参数	说明
doneFilter	Function类型可选当Deferred（延迟）对象得到解决时被调用的一个函数
failFilter	Function类型可选当Deferred（延迟）对象得到拒绝时被调用的一个函数
progressFilter	Function类型可选当Deferred（延迟）对象生成进度通知时被调用的一个函数调用
doneCallbacks	Function类型当Deferred（延迟）对象得到解决时被调用的一个函数或函数数组
failCallbacks	Function类型当Deferred（延迟）对象得到拒绝时被调用的一个函数或函数数组
progressCallbacks	Function类型当Deferred（延迟）对象生成进度通知时被调用的一个函数或函数数组

返回值

deferred.then() 返回 Promise 对象

示例&说明

HTML代码：

<button>过滤解决值</button>
<p></p>

过滤解决值:

var filterResolve = function() {
    var defer = $.Deferred(),
        //当延迟对象解决时被调用
        //过滤解决值给then()的返回Promise对象的完成回调函数
        filtered = defer.then(function( value ) {
            return value * 2;
        });

    defer.resolve( 5 );

    //添加Promise对象的完成回调函数
    filtered.done(function( value ) {
        $( "p" ).html( "值是 ( 2*5 = ) 10: " + value );
    });
};
$( "button" ).on( "click", filterResolve );

过滤拒绝值:

var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的，回调函数过滤拒绝值 
//传递过滤的拒绝值 value * 3 给then()的返回Promise对象的拒绝回调函数fail
        filtered = defer.then( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延迟对象被拒绝 调用then() return 18

    //then()的返回Promise对象添加拒绝回调函数，并获取过滤的拒绝值
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
    });

链任务（？）：

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()

当Deferred对象被拒绝(reject)时，调用通过deferred.catch()添加的处理程序。

deferred.catch( fn ) 是 deferred.then( null, fn )的一个别名

语法

deferred.catch( failCallbacks )

jQuery 3.0 新增该函数

参数说明

参数	说明
failCallbacks	Function类型一个函数，当 Deferred 对象被拒绝(reject)时被调用

返回值

deferred.catch() 返回的是一个 Promise 对象

示例&说明

jQuery.get 方法返回一个jqXHR对象，它是从Deferred对象派生的，当Deferred对象被拒绝(reject) 时，我们可以使用.catch方法来处理，jQuery示例代码：

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

deferred.promise()

deferred.promise() 函数返回 Deferred(延迟)的 Promise 对象。

注意：

方法允许一个异步函数阻止那些干涉其内部请求的进度（progress）或状态（status）的其它代码。
Promise 对象只包含 deferred 对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(), 这些方法只能观察一个 deferred 的状态；不包括任何用于改变状态的延迟方法(resolve, reject, notify, resolveWith, rejectWith, 和 notifyWith)，因此Promise 对象无法更改 deferred 对象的内在状态
deferred.promise()也可以接受一个 target 参数，此时传入的 target 将被赋予 Promise 的方法，并作为结果返回，而不是创建一个新对象（这个方法可以用于在已经存在的对象上绑定 Promise 行为的情况）。

语法

deferred.promise( [target ] )

jQuery 1.5 新增该函数

参数说明

参数	说明
target	Object类型绑定 promise 方法的对象。

返回值

deferred.promise() 返回的是一个 Promise 对象

示例&说明

创建一个延迟对象，并设定两个延时时间是随机的定时器，分别用于受理（resolve）和拒绝（reject）延迟对象。无论哪一个先执行，都会调用其中一个回调函数。而另一个定时器则不会产生任何效果，因为在最先调用的那个定时器处理中，延迟对象已经处于完成状态(resolved 或 rejected 状态)。同时，还会设定一个定时器进度（progress）通知函数，用于进度通知处理，并在文档的 “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 （解决状态）
        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 （拒绝状态）
        setTimeout(function(){
            dfd.reject("对不起");
        },rejectTime);

        // 每半秒显示一个"working..."消息
        setTimeout(function working(){
            //"pending" : Deferred 对象是尚未完成状态
            //0ms 执行一次  500ms执行一次 1000ms执行一次
            //1364ms 执行  dfd.reject("对不起") 
            //传递拒绝值"对不起" 给拒绝过滤函数 alert( status+&#39;, 这次你失败了&#39; );
            if ( dfd.state() === "pending" ) {
                //向正在执行的Deferred 对象的回调函数列表传递参数
                dfd.notify("working... ");

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

        // 返回 Promise 对象，调用者不能改变延迟对象
        return dfd.promise();
    }
    // 为异步函数附加一个done, fail, 和 progress 处理程序
//如果向 jQuery.when 传入一个延迟对象，那么会返回它的 Promise 对象(延迟方法的一个子集)
    $.when( asyncEvent() ).then(
        function(status){
            alert( status+&#39;, 事情进展顺利&#39; );
        },
        function(status){
            alert( status+&#39;, 这次你失败了&#39; );
        },
        function(status){
            $("body").append(status);
        }
    );

使用目标参数,产生现有对象的Promise对象：

// 现有对象
    var obj = {
        hello: function( name ) {
            alert( "Hello " + name );
        }
    },
    // 创建一个延迟 Deferred
    defer = $.Deferred();
    // 设置对象作为 promise
    defer.promise( obj );
    // Resolve （解决） 该对象
    defer.resolve( "John" );
    // 使用该对象作为 Promise，向受理列表中添加回调函数
    //延迟对象状态为解决，因此done 被调用
    obj.done(function( name ) {
        obj.hello( name ); //将弹出 "Hello John"
    }).hello( "Karl" ); // 将弹出 "Hello Karl";

.promise()

.promise() 函数返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中。

返回的 Promise 被链接到延迟对象上，保存在元素的 .data() 中。由于 .remove() 方法会移除元素上的 data，同时也会移除元素本身。所以，使用它会防止任何元素上未被受理的（unresolved） Promise 被受理（resolving）。如果有必要在元素的 Promise 被受理（resolved）之前，从 DOM 中移除该元素的话，请使用.detach() 来代替。之后再调用 .removeData()

注意：

.promise() 方法返回一个动态生成的 Promise，当绑定到集合中的所有特定动作（action）已经被加入或未被加入到队列中时，生成的 Promise 将被受理（resolve）。

语法

.promise( [type ] [, target ] )

jQuery 1.5新增

参数说明

参数	说明
type	可选/String类型需要待观察队列类型。
target	可选/PlainObject类型将要绑定 promise 方法的对象。

默认情况下， type的值是”fx” ，这意味着返回被受理（resolve）的 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。

如果提供target参数，.promise()在该参数上添加方法，然后返回这个对象，而不是创建一个新的。它适用于在一个已经存在的对象上添加 Promise 行为的情况。

返回值

.promise()方法返回一个动态生成的 Promise对象。

示例&说明

1.在一个没有激活动画的集合上调用 .promise()
相关的jQuery示例代码：

//在一个没有激活动画的集合上调用 .promise()，返回一个被受理（resolved）的 Promise
var div = $( "<div />" );
    div.promise().done(function( arg1 ) {
        //弹出 "true"
        alert( this === div && arg1 === div );
    });

2.当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关HTML代码 :

<style type="text/css">
//没有样式不易观察执行效果，因此添加样式设置
    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>

当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关jQuery代码：

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

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

        $( "div" ).promise().done(function() {
            $( "p" ).append( " 完成! " );
        });
    });
    //效果显示好像是等动画执行完成后才执行done()方法

使用 $.when() 语句(.promise() 方法使得在 jQuery 集合中实现它变成了可能)，受理（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(" 完成! ");
        });
        //效果显示好像是等动画执行完成后才执行done()方法
    });

【推荐学习：jQuery视频教程、web前端视频】

以上是jquery延遲物件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML和React的集成：實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合，構建高效的用戶界面。 1)使用JSX嵌入HTML元素，2)利用虛擬DOM優化渲染性能，3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀，還能提升應用性能。

React和HTML：渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據，並通過合成事件系統處理用戶事件。 1）使用useState管理狀態，如計數器示例。 2）事件處理通過在JSX中添加函數實現，如按鈕點擊。 3）渲染列表需使用key屬性，如TodoList組件。 4）表單處理需使用useState和e.preventDefault()，如Form組件。

後端連接：反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互，實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件，2)發起HTTP請求，3)處理服務器響應，4)更新組件狀態並重新渲染。

反應：專注於用戶界面（前端）Apr 20, 2025 am 12:18 AM

React是一種用於構建用戶界面的JavaScript庫，通過組件化開發和虛擬DOM提高效率。 1.組件與JSX：使用JSX語法定義組件，增強代碼直觀性和質量。 2.虛擬DOM與渲染：通過虛擬DOM和diff算法優化渲染性能。 3.狀態管理與Hooks：Hooks如useState和useEffect簡化狀態管理和副作用處理。 4.使用示例：從基本表單到高級的全局狀態管理，使用ContextAPI。 5.常見錯誤與調試：避免狀態管理不當和組件更新問題，使用ReactDevTools調試。 6.性能優化與最佳

React的角色：前端還是後端？澄清區別Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary，focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited avelyuseVirusity diftualdom，and internactSwithBackendServIcesViaApisforDatahandling，butdoesnotprocessorcorsorsorstoredordordordoredairself。

在HTML中進行反應：構建交互式用戶界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中來增強或完全重寫傳統的HTML頁面。 1)使用React的基本步驟包括在HTML中添加一個根div，並通過ReactDOM.render()渲染React組件。 2)更高級的應用包括使用useState管理狀態和實現複雜的UI交互，如計數器和待辦事項列表。 3)優化和最佳實踐包括代碼分割、惰性加載和使用React.memo和useMemo來提高性能。通過這些方法，開發者可以利用React的強大功能來構建動態和響應迅速的用戶界面。

反應：現代前端發展基礎Apr 19, 2025 am 12:23 AM

React是構建現代前端應用的JavaScript庫。 1.它採用組件化和虛擬DOM優化性能。 2.組件使用JSX定義，狀態和屬性管理數據。 3.Hooks簡化生命週期管理。 4.使用ContextAPI管理全局狀態。 5.常見錯誤需調試狀態更新和生命週期。 6.優化技巧包括Memoization、代碼拆分和虛擬滾動。