検索
ホームページウェブフロントエンドjsチュートリアルjQueryのdeferred object_jqueryの詳しい説明

1. 遅延オブジェクトとは何ですか?

Web サイトの開発プロセスでは、長時間かかる特定の JavaScript 操作が頻繁に発生します。その中には、非同期操作 (サーバー データの ajax 読み取りなど) と同期操作 (大規模な配列の走査など) の両方があり、結果はすぐには得られません。

通常のアプローチは、コールバック関数を指定することです。つまり、実行終了後にどの関数を呼び出すかを事前に指定します。

しかし、jQuery はコールバック関数に関しては非常に弱いです。これを変更するために、jQuery 開発チームは遅延オブジェクトを設計しました。

簡単に言うと、遅延オブジェクトは jQuery のコールバック関数ソリューションです。英語で defer は「遅延」を意味するため、deferred オブジェクトの意味は、将来の特定の時点まで実行を「遅らせる」ことです。

時間のかかる操作をどのように処理するかという問題を解決し、それらの操作をより適切に制御し、統一されたプログラミング インターフェイスを提供します。その主な機能は4点に集約されます。以下、サンプルコードを通して段階的に学習していきます。

2. ajax操作のチェーン記述方法

まず、jQuery の ajax 操作を記述する従来の方法を確認してみましょう。

コードをコピーします コードは次のとおりです:

$.ajax({
URL: "test.html",
成功: function(){
alert("はは、成功しました!");
}、
エラー:関数(){
alert("何か問題が発生しました!");
}
});

上記のコードでは、$.ajax() はオブジェクト パラメーターを受け入れます。このオブジェクトには 2 つのメソッドが含まれています。success メソッドは操作が成功した後のコールバック関数を指定し、error メソッドは操作が失敗した後のコールバック関数を指定します。

$.ajax() 操作が完了すると、1.5.0 より前のバージョンの jQuery を使用している場合は XHR オブジェクトが返され、バージョンが 1.5.0 より高い場合はチェーン操作を実行できません。 、返された Deferred オブジェクトはチェーン化できます。

さて、新しい書き方は次のとおりです:

コードをコピーします コードは次のとおりです:

$.ajax("test.html")
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });

ご覧のとおり、done() は success メソッドに相当し、fail() は error メソッドに相当します。チェーンライティング方式を採用してからは、コードの可読性が大幅に向上しました。

3. 同じ操作に複数のコールバック関数を指定します

遅延オブジェクトの大きな利点の 1 つは、複数のコールバック関数を自由に追加できることです。

上記のコードを例にとると、ajax 操作が成功した後、元のコールバック関数に加えて別のコールバック関数を実行したい場合、どうすればよいでしょうか?

とても簡単です。最後に追加するだけです。

コードをコピーします コードは次のとおりです:

$.ajax("test.html")
.done(function(){alert("はは、成功しました!");} )
.fail(function(){alert("エラー!"); } )
.done(function(){alert("2 番目のコールバック関数!");} );

コールバック関数は好きなだけ追加でき、追加された順序で実行されます。

4. 複数の操作のコールバック関数を指定します

遅延オブジェクトのもう 1 つの大きな利点は、従来の記述では不可能だった複数のイベントのコールバック関数を指定できることです。

新しいメソッド $.when() を使用する次のコードを見てください。

コードをコピーします コードは次のとおりです:

$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });

このコードの意味は、最初に $.ajax("test1.html") と $.ajax("test2.html") の 2 つの操作を実行し、両方が成功した場合、done() 関数で指定されたコールバックを実行することです。 ; どちらかが失敗した場合、または両方が失敗した場合は、fail() で指定されたコールバック関数が実行されます。

5. 共通操作のコールバック関数インターフェース (その 1)

遅延オブジェクトの最大の利点は、このコールバック関数インターフェイスのセットを ajax 操作からすべての操作に拡張することです。つまり、ajax 操作かローカル操作か、非同期操作か同期操作かに関係なく、どの操作でも遅延オブジェクトのさまざまなメソッドを使用してコールバック関数を指定できます。

具体的な例を見てみましょう。時間のかかる操作の待機があるとします。

コードをコピーします コードは次のとおりです:

var wait = function(){
var task = function(){
alert("実行が完了しました!");
};
setTimeout(tasks,5000);
};


コールバック関数を指定する場合はどうすればよいでしょうか?

当然、$.when():

を使用できると考えるでしょう。

コードをコピーします コードは次のとおりです:

$.when(wait())
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });
[コード]

ただし、このように書くとdone()メソッドがすぐに実行されてしまい、コールバック関数として機能しません。その理由は、$.when() のパラメーターは遅延オブジェクトのみであるため、wait() を書き換える必要があるためです。

[コード]

var dtd = $.Deferred() // 新しい遅延オブジェクトを作成します
var wait = function(dtd){
var task = function(){
alert("実行が完了しました!");
dtd.resolve(); // 遅延オブジェクトの実行ステータスを変更します
};
setTimeout(tasks,5000);
dtd を返します;
};

wait() 関数は遅延オブジェクトを返すため、チェーン操作を追加できます。

コードをコピーします コードは次のとおりです:
$.when(wait(dtd))
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });

wait() 関数の実行後、done() メソッドで指定されたコールバック関数が自動的に実行されます。

6. deferred.resolve() メソッドと deferred.reject() メソッド

注意深く見てみると、上記の wait() 関数内に、説明しなかった別の場所があることがわかります。それが dtd.resolve() の動作ですか?

この問題を明確にするために、「実行状態」という新しい概念を導入する必要があります。 jQuery では、遅延オブジェクトには 3 つの実行状態 (未完了、完了、失敗) があると規定しています。実行ステータスが「完了」(解決済み) の場合、遅延オブジェクトは、done() メソッドで指定されたコールバック関数をすぐに呼び出します。実行ステータスが「失敗」の場合、fail() メソッドで指定されたコールバック関数が呼び出されます。実行ステータスが「失敗」「完了」の場合は、そのまま待機するか、progress() メソッド (jQuery 1.7 バージョンで追加) で指定されたコールバック関数を呼び出します。

前の部分の ajax 操作中に、遅延オブジェクトは戻り結果に基づいて実行ステータスを自動的に変更しますが、wait() 関数では、この実行ステータスはプログラマによって手動で指定される必要があります。 dtd.resolve() の意味は、dtd オブジェクトの実行ステータスを「未完了」から「完了」に変更し、done() メソッドをトリガーすることです。

同様に、dtd オブジェクトの実行ステータスを「不完全」から「失敗」に変更し、fail() メソッドをトリガーする deferred.reject() メソッドもあります。

コードをコピーします コードは次のとおりです:
var dtd = $.Deferred() // 新しい Deferred オブジェクトを作成します
var wait = function(dtd){
var task = function(){
alert("実行が完了しました!");
dtd.reject(); // Deferred オブジェクトの実行ステータスを変更します
};
setTimeout(tasks,5000);
dtd を返します;
};
$.when(wait(dtd))
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });

7. deferred.promise() メソッド

上記の書き方にはまだ問題があります。つまり、dtdはグローバルオブジェクトなので、その実行状態を外部から変更することができます。

以下のコードを見てください:

コードをコピー コードは次のとおりです:

var dtd = $.Deferred() // 新しい Deferred オブジェクトを作成します
var wait = function(dtd){
var task = function(){
alert("実行が完了しました!");
dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します
};
setTimeout(tasks,5000);
dtd を返します;
};
$.when(wait(dtd))
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });
dtd.resolve();

コードの最後に dtd.resolve() の行を追加しました。これにより、dtd オブジェクトの実行ステータスが変更され、done() メソッドが即座に実行され、「はは、成功しました!」というメッセージが表示されます。 5 数秒後、「実行が完了しました!」というプロンプト ボックスが表示されます。

この状況を回避するために、jQuery は deferred.promise() メソッドを提供します。その機能は、元の遅延オブジェクトに別の遅延オブジェクトを返すことです。後者は、実行ステータスの変更に関連しないメソッド (done() メソッドやfail() メソッドなど) のみを開き、ステータスの変更に関連するメソッドをブロックします。実行状態(resolve()メソッドやreject()メソッドなど)を変更できないようにするため。

以下のコードを見てください:

コードをコピー コードは次のとおりです:

var dtd = $.Deferred() // 新しい Deferred オブジェクトを作成します
var wait = function(dtd){
var task = function(){
alert("実行が完了しました!");
dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します
};

setTimeout(tasks,5000);
Return dtd.promise() // Promise オブジェクトを返します
};
var d = wait(dtd); // 新しい d オブジェクトを作成し、代わりにこのオブジェクトを操作します
$.when(d)
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });
d.resolve(); // 現時点では、このステートメントは無効です


上記のコードでは、wait() 関数は Promise オブジェクトを返します。次に、元の遅延オブジェクトではなく、このオブジェクトにコールバック関数をバインドします。この利点は、このオブジェクトの実行ステータスを変更できないことです。実行ステータスを変更したい場合は、元の遅延オブジェクトのみを操作できることです。

ただし、allenm が指摘したように、dtd オブジェクトを wait() 関数の内部オブジェクトに変換する、より良い記述方法です。

コードをコピーします コードは次のとおりです:

var wait = function(dtd){
var dtd = $.Deferred(); //関数内で新しいDeferredオブジェクトを作成します
var task = function(){
alert("実行が完了しました!");
dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します
};
setTimeout(tasks,5000);
Return dtd.promise() // Promise オブジェクトを返します
};
$.when(wait())
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });

8. 共通操作用コールバック関数インターフェース (中)

実行状態が外部から変更されるのを防ぐもう 1 つの方法は、遅延オブジェクトのコンストラクター関数 $.Deferred() を使用することです。

現時点では、wait 関数は変更されていないため、それを $.Deferred() に直接渡します。

コードをコピーします コードは次のとおりです:

$.Deferred(待機)
.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });

jQuery では、$.Deferred() が関数名 (関数名であることに注意してください) をパラメーターとして受け入れることができ、$.Deferred() によって生成された遅延オブジェクトがこの関数のデフォルトのパラメーターとして使用されると規定されています。 。

9. 共通操作用のコールバック関数インターフェース (パート 2)

上記の 2 つの方法に加えて、遅延インターフェイスを待機オブジェクトに直接デプロイすることもできます。

コードをコピーします コードは次のとおりです:

var dtd = $.Deferred() // Deferred オブジェクトを生成します
var wait = function(dtd){
var task = function(){
alert("実行が完了しました!");
dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します
};
setTimeout(tasks,5000);
};
dtd.promise(wait);
wait.done(function(){alert("はは、成功しました!"); })
.fail(function(){alert("エラー!"); });
wait(dtd);


ここで重要なのは dtd.promise(wait) 行で、これは待機オブジェクトに Deferred インターフェイスをデプロイするために使用されます。この行があるからこそ、後で wait 時に doned() と failed() を直接呼び出すことができるのです。

10. 要約: 遅延オブジェクトのメソッド

遅延オブジェクトのさまざまなメソッドについてはすでに説明しました。以下に要約します。

(1) $.Deferred() は遅延オブジェクトを生成します。

(2) deferred.done()は操作成功時のコールバック関数を指定します

(3) deferred.fail() 操作失敗時のコールバック関数を指定

(4) deferred.promise() にパラメータがない場合、新しい遅延オブジェクトが返され、パラメータを受け入れるとオブジェクトの実行ステータスを変更できなくなり、パラメータ オブジェクトに遅延インターフェイスをデプロイする役割を果たします。 。

(5) deferred.resolve() 遅延オブジェクトの実行ステータスを手動で「Completed」に変更し、即座にdone()メソッドをトリガーします。

(6) deferred.reject() このメソッドは deferred.resolve() の逆で、呼び出された後、遅延オブジェクトの実行ステータスが "failed" に変更され、fail() メソッドがトリガーされます。すぐに。

(7) $.when() は複数の操作に対するコールバック関数を指定します。

これらのメソッドに加えて、遅延オブジェクトには 2 つの重要なメソッドもありますが、上記のチュートリアルでは説明されていません。

(8)deferred.then()

トラブルを避けるために、done() と failed() を一緒に記述することができます。これが then() メソッドです。

コードをコピーします コードは次のとおりです:

$.when($.ajax( "/main.php" ))
.then(successFunc, FailureFunc);

then() に 2 つのパラメーターがある場合、最初のパラメーターは Done() メソッドのコールバック関数で、2 番目のパラメーターは failed() メソッドのコールバック メソッドです。 then() にパラメータが 1 つしかない場合、done() と同等です。

(9) deferred.always()

このメソッドは、コールバック関数を指定するためにも使用されます。その機能は、deferred.resolve() と deferred.reject() のどちらが呼び出されても、必ず最後に実行されることです。

コードをコピーします コードは次のとおりです:

$.ajax( "test.html" )
.always( function() {alert("実行されました!");} );
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境