ホームページ  >  記事  >  ウェブフロントエンド  >  jquery遅延オブジェクトとは何ですか

jquery遅延オブジェクトとは何ですか

青灯夜游
青灯夜游オリジナル
2022-11-02 17:58:042048ブラウズ

jquery 遅延オブジェクトは「Deferred」です。これは、jQuery.Deferred() メソッドを呼び出すことによって作成されるリンク可能なユーティリティ オブジェクトです。遅延オブジェクトはチェーン可能であり、jQuery オブジェクトがチェーン可能である方法と似ていますが、独自のメソッドがある点が異なります。複数のコールバック関数をコールバック リストに登録し、コールバック リストを呼び出し、非同期または同期の成功または失敗を渡すことができます。機能の状態。

jquery遅延オブジェクトとは何ですか

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

jQuery 1.5 で導入された Deferred オブジェクトは、jQuery.Deferred() メソッドを呼び出すことによって作成されるリンク可能なユーティリティ オブジェクトです。複数のコールバック関数をコールバック リストに登録し、コールバック リストを呼び出して、非同期関数または同期関数の成功または失敗ステータスを渡すことができます。

遅延オブジェクトは、独自のメソッドを持つことを除いて、jQuery オブジェクトがチェーン可能である方法と同様にチェーン可能です。 Deferred オブジェクトを作成した後、次のいずれかのメソッドを使用して、1 つ以上のメソッドを呼び出して作成または保存されたオブジェクトに直接リンクできます。

#リスト

関数説明##$.Deferred() は、連鎖ユーティリティ オブジェクト メソッドを返して複数のコールバックを登録し、コールバック キューを呼び出して同期または非同期関数の成功または失敗のステータスを渡すために使用されます。 #deferred.always()deferred .done()deferred.fail() deferred.progress()deferred.isRejected()##deferred.isResolved()進行中のコールバックにパラメータを渡すために使用##deferred .notifyWith() はパラメータとコンテキスト オブジェクトを進行中のコールバックに渡すために使用されます。deferred.reject() は遅延オブジェクトを拒否し、パラメータを失敗コールバック関数deferred.rejectWith() は、遅延オブジェクトを拒否し、パラメータとコンテキスト オブジェクトを失敗コールバック関数に渡すために使用されますdeferred.resolve() は、遅延オブジェクトを解決し、doneCallbacks コールバック関数にパラメータを渡すために使用されます。 ) は、遅延オブジェクトを解決し、パラメーターとコンテキスト オブジェクトを DoneCallbacks コールバック関数に渡すために使用されます。deferred.state() は、次の目的で使用されます。遅延オブジェクトの現在の状態を決定します##deferred.pipe()deferred.then() は、Deferred オブジェクトが拒否されたときに追加されたハンドラーを呼び出すために使用されます。 Deferred (遅延) Promise オブジェクトを返すために使用されますPromise オブジェクトを返し、コレクションにバインドされた特定のタイプのすべてのアクションがキューに追加されたかどうかを監視するために使用されます。
Deferred オブジェクトが受け入れられるか拒否されるときに、追加されたハンドラーを呼び出すために使用されます
Deferred (遅延) オブジェクトが受け入れられたときに、追加されたハンドラーを呼び出すために使用されます
に使用されます。 Deferred (遅延) オブジェクトが拒否されたときに、追加されたハンドラーを呼び出します。
Deferred (遅延) オブジェクトが進行状況通知を生成するときに使用されます。 、追加ハンドラーを呼び出します
1.8- Deferred オブジェクトが拒否されました
1.8-オブジェクトが拒否されたかどうかを判断するために使用されます #deferred.notify()
関数によって返される状態または遅延オブジェクトをフィルターするために使用されます。 value
は、Deferred オブジェクトが解決されるか拒否されるか、まだ進行中の場合に追加ハンドラーを呼び出すために使用されます。 deferred.catch()
deferred.promise()
.promise()

説明

$.Deferred()

$.Deferred() はコンストラクターであり、次の目的で使用されます。連鎖ユーティリティ オブジェクト メソッドを返して複数のコールバックを登録し、コールバック キューを呼び出し、同期関数または非同期関数の成功または失敗のステータスを渡します。

ヒント:

    ##$.Deferred() コンストラクターは、新しい Deferred (遅延) オブジェクトを作成します。jQuery.Deferred
  • は、遅延された選択された関数を渡すことができます。コンストラクターが戻る前に呼び出され、関数の最初のパラメーターとして新しい Deferred オブジェクトが渡されます。たとえば、呼び出される関数は deferred.then() を使用してコールバック関数をアタッチできます。
  • 遅延オブジェクトは保留状態で開始されます。 deferred.then()、deferred.always()、
  • deferred.done()、または deferred.fail() を使用してこのオブジェクトに追加されたコールバック関数は、実行のためにキューに入れられます。
遅延を解決された状態に移行した直後に、deferred.resolve() または eferred.resolveWith() を呼び出して、設定された

donedCallbacks を実行します。
deferred.reject() または deferred.rejectWith() を呼び出した直後に、設定されたfailCallbacksを実行して、遅延を拒否状態に変換します。オブジェクトが解決済みまたは拒否された状態になると、その状態のままになります。解決または拒否された Deferred オブジェクトにコールバックを追加することもできます。コールバックはすぐに実行されます。
#Syntax

$.Deferred( [beforeStart ] )
  • ##jQuery1.5 でこの関数が追加されました ##パラメータの説明

パラメータ

説明#関数の種類 コンストラクターが返す前に呼び出される関数
beforeStart
戻り値jQuery.Deferred() ファクトリ関数の作成 新しい遅延オブジェクト。

deferred.always()


Deferred (遅延) オブジェクトが受け入れられるか拒否されるときは、 deferred.always ( ) ハンドラーを追加しました。

ヒント: パラメーターには関数または関数の配列を指定できます。 deferred.always() は Deferred オブジェクトを返すため、追加の .always メソッドを含む、他の遅延オブジェクト メソッド (ここでは Deferred オブジェクトを呼び出し続けることができるメソッドを指します ) に接続できます。 Deferred オブジェクトが解決または拒否されると、 deferred.always() 経由で追加されたコールバック関数が追加された順序で実行され、引数として次のメソッドに渡すことができます:solve 、reject 、resolveWith または raiseWith 。 #構文

deferred.always( alwaysCallbacks [, alwaysCallbacks ] )

jQuery1.6 でこの関数が追加されました

##パラメータの説明

パラメータ

説明

alwaysCallbacksオプション/関数タイプ 注: deferred.always () メソッドは、Deferred オブジェクトの .resolve() または .reject() で使用されるパラメータを受け取りますが、これらは多くの場合大きく異なります。このため、パラメータをチェックせずにその動作をそのまま使用することが最善です。ほとんどの場合、パラメーターが既知であるため、明示的な .done() または .fail() ハンドラーを使用します。 戻り値例と説明jQuery.get() メソッドは値を返しますjqXHR オブジェクトの Deferred (遅延) オブジェクトから、deferred.always () メソッドを使用して成功とエラーのコールバックをアタッチできます。jQuery サンプル コード:
Deferred オブジェクトが解決または拒否されたときに呼び出される関数または関数の配列
deferred.always() は Deferred (遅延) オブジェクトを返します
 $.get( "test.php" ).always(function() {
    alert( "带有成功和错误的回调参数的$.get方法已完成。" );
 })

#deferred .done()

Deferred (遅延) オブジェクトが受け入れられると、ハンドラーは

遅延オブジェクト関数 deferred.done()## によって追加されます。 # が呼び出されます。

ヒント: このメソッドは 1 つ以上のパラメーターを受け入れます。 deferred.done() は、追加の .done() メソッドを含む、他の遅延オブジェクト メソッド (引き続き Deferred オブジェクトのメソッドの呼び出し) に接続できる Deferred オブジェクトを返します。 Deferred オブジェクトが解決されると、deferred.done() によって追加されたコールバック関数が追加された順序で実行され、resolve メソッド、resolveWith メソッドにパラメーターとして渡すことができます。 #Syntax<span style="font-size: 18px;"></span>deferred.done( doneCallbacks [, donedCallbacks ] )

jQuery1.5 でこの関数が追加されました ##パラメータの説明

パラメータ
  • 説明

doneCallbacks

オプション/関数タイプ 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 オブジェクトを返します


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

deferred.isRejected() 関数は、Deferred オブジェクトが拒否されたかどうかを判断するために使用されます。

jQuery 1.7 では非推奨となっているため、代わりに deferred.state() を使用してください。

注:

    Deferred オブジェクトが拒否された状態にある場合は true を返します。これは、オブジェクトに対して deferred.reject() または deferred.rejectWith() が呼び出され、failCallbacks が呼び出された (または呼び出し中である) ことを意味します。
  • Deferred (遅延) オブジェクトには、pending (保留中)、resolved (解決済み)、rejected (拒否) の 3 つの状態があります。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 オブジェクトが解決されたかどうかを判断するために使用されます。

jQuery 1.7 では非推奨となっているため、代わりに deferred.state() を使用してください。

注:

Deferred オブジェクトが解決された状態にある場合は true を返します。これは、オブジェクトに対して deferred.resolve() または deferred.resolveWith() が呼び出され、doneCallbacks が呼び出された (または呼び出されている途中である) ことを意味します。

    Deferred (遅延) オブジェクトには、pending (保留中)、resolved (解決済み)、rejected (拒否) の 3 つの状態があります。deferred.isRejected() を使用して、遅延オブジェクトが拒否された状態であるかどうかを判断します。
  • 構文

deferred.isResolved()

  • この関数は jQuery 1.5 で追加され、1.7 で廃止され、削除されました1.8 では
##戻り値

deferred.isResolved() は
Boolean 型を返します

# #deferred.notify()

<span style="font-size: 18px;">deferred.notify() 関数は、パラメーターを設定し、呼び出される遅延オブジェクトのコールバック関数 (progressCallbacks) に渡すために使用されます。 。 </span>注:

通常、このメソッドを呼び出すことができるのは、遅延オブジェクト (Deferred) の作成者だけです。

deferred.promise() を呼び出して制限された Promise オブジェクトを返すことで、他のコードが遅延オブジェクトの状態を変更したり、その状態を報告したりするのを防ぐことができます。

    deferred.notify にアクセスすると、deferred.then または deferred.progress にアクセスすることで、progressCallback を追加できます。コールバックは追加された順序で実行されます。
  • .notify() から呼び出し元の遅延オブジェクトのコールバック関数にパラメーターを渡し、遅延オブジェクトが
  • 解決または拒否された後に任意の関数を呼び出します。notify() (または progressCallbacks を追加)
  • は無視されます

Syntax<br><br>deferred.notify( args )

    jQuery 1.7 追加この関数
  • ##パラメータの説明

パラメータ
##説明

オプション/オブジェクト タイプ 進行中のコールバック (progressCallbacks) にオプションのパラメーターを渡します
#args

返回值

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

参数说明

参数 说明
context Object类型 作为this对象,传递给进行中的回调(progressCallbacks)
args Array类型 传递一个可选的参数给进行中的回调(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新增该函数

参数说明

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

戻り値

deferred.reject() は Deferred オブジェクトを返します


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

deferred.rejectWith() 関数は、遅延オブジェクトを拒否し、指定されたコンテキストと引数パラメーターに基づいて、failCallbacks コールバック関数を呼び出すために使用されます。

注:

  • 通常、このメソッドを呼び出すことができるのは、遅延オブジェクトの作成者だけです。制限された Promise オブジェクトを返す deferred.promise() を呼び出すことで、他のコードが遅延オブジェクトの状態を変更したり、その状態を報告したりするのを防ぐことができます。
  • 遅延オブジェクトが拒否されると、deferred.then または deferred.fail を通じて追加されたfailCallbacksが呼び出されます。コールバック関数は追加された順序で実行されます。 deferred.reject() に渡される args パラメータは、各コールバック関数に渡されます。遅延オブジェクトが拒否状態になると、追加されたfailCallbacksは、.reject()に渡されたパラメータを使用してただちに実行されます。
#構文

##deferred.rejectWith( context [, args ] )
  • jQuery1.5 でこの関数が追加されました

パラメータの説明

パラメータ説明コンテキスト オブジェクトを失敗コールバック (failCallbacks) に渡す配列タイプ#deferred.rejectWith() は Deferred オブジェクトを返します
オブジェクト タイプ ##args
渡す失敗したコールバック (failCallbacks) へのオプションのパラメータ #戻り値

deferred.resolve()


deferred.resolve() 関数 Deferred (遅延) オブジェクトを解決するにはそして、指定された args パラメータに従ってコールバック関数 DoneCallbacks を完了します。 <span style="font-size: 18px;"></span>注:

通常、このメソッドを呼び出すことができるのは、遅延オブジェクトの作成者だけです。制限された Promise オブジェクトを返す deferred.promise() を呼び出すことで、他のコードが遅延オブジェクトの状態を変更したり、その状態を報告したりするのを防ぐことができます。

遅延オブジェクトが解決されると、deferred.then または deferred.done を通じて追加された DoneCallbacks が呼び出されます。コールバック関数は追加された順序で実行されます。 deferred.resolve() に渡される args パラメータは、各コールバック関数に渡されます。遅延オブジェクトが解決済み状態になると、追加された DoneCallbacks は .resolve() に渡されたパラメーターを使用して即座に実行されます。

    構文
  • deferred.resolve( args )

jQuery1.5 でこの関数が追加されました
  • パラメータの説明

パラメータ

説明オブジェクトタイプ オプションのパラメータを完了コールバック関数 (doneCallbacks) に渡します deferred.resolve () Deferred オブジェクトを返します
args
戻り値

##deferred.resolveWith()


#deferred。 solveWith() 関数は、Deferred (遅延) オブジェクトを解決し、指定された context および args パラメーターに基づいてコールバック関数 dononeCallbacks を完了するために使用されます。 注: <span style="font-size: 18px;"></span> 通常、このメソッドを呼び出すことができるのは、遅延オブジェクトの作成者だけです。制限された Promise オブジェクトを返す deferred.promise() を呼び出すことで、他のコードが遅延オブジェクトの状態を変更したり、その状態を報告したりするのを防ぐことができます。

遅延オブジェクトが解決されると、deferred.then または deferred.done を通じて追加された DoneCallbacks が呼び出されます。コールバック関数は追加された順序で実行されます。 deferred.resolve() に渡される args パラメータは、各コールバック関数に渡されます。遅延オブジェクトが解決済み状態になると、追加された DoneCallbacks は .resolve() に渡されたパラメーターを使用して即座に実行されます。

構文

  • deferred.resolveWith( context [, args ] )
jQuery1.5 でこの関数が追加されました

    パラメータの説明

パラメータ

説明

オブジェクト型 コンテキスト オブジェクトを完了コールバック関数 (doneCallbacks) に渡します
コンテキスト
args 配列型 オプションのパラメータを完了コールバック関数 (doneCallbacks) に渡します

戻り値

deferred.resolveWith() は Deferred オブジェクトを返します


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

#deferred.state() 関数は、Deferred オブジェクトの現在の状態を確認するために使用されます。

主にデバッグに使用されます。たとえば、遅延オブジェクトを拒否する準備をする前に、それがすでに解決された状態にあるかどうかを確認します。

注: deferred.state() メソッドは、Deferred オブジェクトの現在の状態を表す文字列を返します。遅延オブジェクトは、次の 3 つの状態のいずれかになります。

    "
  • pending": 遅延オブジェクトは、未完了の状態です。
  • "
  • resolved" : Deferred オブジェクトは解決された状態にあります。これは、オブジェクトの deferred.resolve() または deferred.resolveWith() が呼び出され、doneCallbacks が完了したことを意味します。呼び出された (または呼び出される途中)
  • "
  • rejected" : Deferred オブジェクトは拒否された状態にあります。これは、オブジェクトの deferred.reject() または を意味します。 requestWith() が呼び出され、failCallbacks が呼び出されています (または呼び出されている途中です)。
  • #構文

deferred.state()
jQuery1.7 でこの関数が追加されました

#戻り値

deferred.state() は

String 型を返します


deferred.pipe() <span style="font-size: 18px;"></span>#deferred.pipe() 関数は、遅延オブジェクトのフィルタリングやチェーン化を行うためのユーティリティ メソッドです。

注:

jQuery 1.8 以降、deferred.pipe() メソッドは廃止されました

。代わりに deferred.then() を使用してください。

jQuery 1.8 では、deferred.pipe() メソッドは廃止されたため、代わりに deferred.then() を使用する必要があります。

deferred.pipe() メソッドは新しい Promise オブジェクトを返します。

は、関数

によって返される遅延オブジェクトのステータスまたは値をフィルタリングするために使用されます。対応する Promise オブジェクトに渡されます。 doned() メソッドとfail() メソッド doneFilter 関数とfailFilter 関数は、元の遅延 (遅延) 解決/拒否のステータスと値をフィルタリングします。 jQuery 1.7 以降、このメソッドは、遅延 (遅延) にアクセスするすべての Notice メソッドまたは NotifyWith メソッドをフィルタリングする progressFilter 関数も受け入れます。
これらのフィルターは、pipe() によって返された Promise オブジェクトの Done() または failed() コールバック関数が呼び出されたときに新しい値を返すことも、他の表示可能なオブジェクト (Deferred、Promise など) を返すこともできます。これらの可視オブジェクト
は、独自の解決/拒否

ステータス

を渡し、 戻り値 をパイプ Promise コールバック関数に渡します。 フィルター関数として null が使用されている場合、またはフィルター関数が指定されていない場合、パイプ Promise が受け入れられる (解決) または拒否される (拒否) ときに、元の値と同じ値が使用されます。 #Syntax

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

## この関数は jQuery 1.6 で追加され、現在では廃止されています。 1.8
deferred.pipe( [doneFilter ] [,failFilter ] [, progressFilter ] )

この関数は jQuery 1.7 で追加されました。 1.8 では廃止されました
  • パラメータの説明

パラメータ

説明 ##doneFilter関数の種類 遅延が解決されたときに呼び出されるオプションの関数failFilter 遅延が拒否されたときに呼び出されるオプションの関数 progressFilter 進捗通知が拒否されたときに呼び出されるオプションの関数Deferred(遅延) に送信される名前は # です

返回值

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移除

参数说明

関数タイプ
関数タイプ
参数 说明
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
    });

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

参数说明

参数 说明
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!" );
  } );

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

参数说明

参数 说明
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";

<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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。