目錄
列表
說明
語法
參數說明
deferred.always( alwaysCallbacks [, alwaysCallbacks ] )
一個函數或函數數組,當Deferred(延遲)物件被解決或被拒絕時被呼叫
deferred.done( doneCallbacks [, doneCallbacks ] )
返回值
示例&说明
语法
参数说明
傳回值
小知识
首頁 web前端 前端問答 jquery延遲物件是什麼

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 對象,所以可以連接其他的延遲物件方法(
  • 這裡是指可以繼續呼叫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(延遲)物件範例&說明<span style="font-size: 18px;"></span>jQuery.get()方法傳回一個來自一個Deferred(延遲)物件的jqXHR對象,我們可以附加一個成功和錯誤使用deferred.always()方法的回調,jQuery範例程式碼:

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

deferred .done()

當Deferred(延遲)物件被受理時,呼叫
    透過延遲物件函數deferred.done()
  • 新增的處理程序。
提示:此方法接受一個或多個參數。 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.
});
登入後複製

<span style="font-size: 18px;">deferred.fail()</span>

当 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 失败!"); });//被拒绝时调用
})
登入後複製

<span style="font-size: 18px;">deferred.progress()</span>

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 物件


<span style="font-size: 18px;">deferred.isRejected( )</span>

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()<span style="font-size: 18px;"></span>

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

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

注意:

    如果 Deferred(延遲)物件是在被解決的狀態,則傳回 true。這意味著 deferred.resolve() 或 deferred.resolveWith() 已經在物件上被呼叫過,並且 doneCallbacks 已經被呼叫過(或正處於被呼叫的階段)。
  • Deferred(延遲)物件可以有三種狀態:掛起(pending),解決(resolved),或拒絕(rejected);使用 deferred.isRejected() 來判斷延遲物件是否在拒絕狀態。
語法

    deferred.isResolved()
jQuery 1.5 新增該函數,1.7過時,1.8移除

傳回值

deferred.isResolved() 回傳的是一個

Boolean類型


# #deferred.notify()<span style="font-size: 18px;"></span>deferred.notify() 函數用來定一個參數,傳遞給正在呼叫的延遲物件上的回呼函數( progressCallbacks )。

注意:

通常,只有延遲物件(Deferred)的創建者才能呼叫此方法。
  • 你可以透過呼叫 deferred.promise() 傳回一個受限的 Promise 對象,來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
  • 當 deferred.notify 被存取時, 任何 progressCallbacks 可以透過存取 deferred.then 或 deferred.progress 來新增。回調依照他們加入時的順序執行。
透過來自.notify()的傳遞參數給正在呼叫的延遲物件上的回呼函數,當遲延物件已經被

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

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对象。


<span style="font-size: 18px;">deferred.notifyWith()</span>

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

注意:

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

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

语法

  • deferred.notifyWith( context [, args ] )

jQuery 1.7 新增该函数

参数说明

参数说明
contextObject类型 作为this对象,传递给进行中的回调(progressCallbacks)
argsArray类型 传递一个可选的参数给进行中的回调(progressCallbacks)

返回值

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


<span style="font-size: 18px;">deferred.reject()</span>

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

注意:

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

语法

  • deferred.reject( args )

jQuery1.5新增该函数

参数说明

参数说明
argsObject类型 传递一个可选的参数给失败的回调(failCallbacks)

傳回值

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


<span style="font-size: 18px;">deferred.rejectWith( )</span>

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新增此函數

參數說明

參數
# contextObject類型 傳遞一個物件給失敗的回呼(failCallbacks)
argsArray類型 傳遞一個可選的參數給失敗的回呼(failCallbacks)

#傳回值

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


<span style="font-size: 18px;">deferred.resolve()</span>

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 物件


<span style="font-size: 18px;">#deferred.resolveWith()</span>

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新增此函數

參數說明

參數
# contextObject類型 傳遞上下文物件給完成回呼函數(doneCallbacks)
argsArray類型 傳遞一個可選的參數給完成回呼函數(doneCallbacks)
#

傳回值

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


<span style="font-size: 18px;">deferred.state( )</span>

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類型


<span style="font-size: 18px;">deferred.pipe() </span>

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過時

    deferred.pipe( [doneFilter ] [, failFilter ] [, progressFilter ] )
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
    });
登入後複製

<span style="font-size: 18px;">deferred.then()</span>

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.then1.8-( doneCallbacks, failCallbacks)

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

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

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

参数说明

Function類型 可選函數,當延遲得到解決時呼叫
Function類型 可選函數,當延遲被拒絕時呼叫
Function類型 可選函數,當進度通知傳送給Deferred(延遲)被呼叫
参数说明
doneFilterFunction类型 可选 当Deferred(延迟)对象得到解决时被调用的一个函数
failFilterFunction类型 可选 当Deferred(延迟)对象得到拒绝时被调用的一个函数
progressFilterFunction类型 可选 当Deferred(延迟)对象生成进度通知时被调用的一个函数调用
doneCallbacksFunction类型 当Deferred(延迟)对象得到解决时被调用的一个函数或函数数组
failCallbacksFunction类型 当Deferred(延迟)对象得到拒绝时被调用的一个函数或函数数组
progressCallbacksFunction类型 当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
    });
登入後複製

<span style="font-size: 18px;">deferred.catch()</span>

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

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

语法

  • deferred.catch( failCallbacks )

jQuery 3.0 新增该函数

参数说明

参数说明
failCallbacksFunction类型 一个函数,当 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!" );
  } );
登入後複製

<span style="font-size: 18px;">deferred.promise()</span>

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 新增该函数

参数说明

参数说明
targetObject类型 绑定 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";
登入後複製

<span style="font-size: 18px;">.promise()</span>

.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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

jQuery引用方法詳解:快速上手指南 jQuery引用方法詳解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解:快速上手指南jQuery是一個受歡迎的JavaScript庫,被廣泛用於網站開發中,它簡化了JavaScript編程,並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法,並提供具體的程式碼範例,幫助讀者快速上手。引入jQuery首先,我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入,也可以下載

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

深度剖析:jQuery的優勢與劣勢 深度剖析:jQuery的優勢與劣勢 Feb 27, 2024 pm 05:18 PM

jQuery是一款廣泛應用於前端開發的快速、小巧、功能豐富的JavaScript庫。自2006年發布以來,jQuery已成為眾多開發者的首選工具之一,但在實際應用中,它也不乏一些優點和缺點。本文將深度剖析jQuery的優勢與劣勢,並結合具體的程式碼範例進行說明。優點:1.簡潔的語法jQuery的語法設計簡潔明了,可以大幅提升程式碼的可讀性和編寫效率。比如,

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:&lt

jQuery如何移除元素的height屬性? jQuery如何移除元素的height屬性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性?在前端開發中,經常會遇到需要操作元素的高度屬性的需求。有時候,我們可能需要動態改變元素的高度,而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性,並提供具體的程式碼範例。在使用jQuery操作高度屬性之前,我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

了解jQuery中eq的作用及應用場景 了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫,被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中,eq()方法是用來選擇指定索引位置的元素的方法,具體使用方法和應用場景如下。在jQuery中,eq()方法選擇指定索引位置的元素。索引位置從0開始計數,即第一個元素的索引是0,第二個元素的索引是1,依此類推。 eq()方法的語法如下:$("s

如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬

See all articles