jquery の基本チュートリアル: 遅延オブジェクトの使用方法_jquery

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

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

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

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

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

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

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

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

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

$.ajax({
url : "test .html",
成功: function(){
alert("はは、成功しました!");

},
error:function(){
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 (" 問題が発生しました! ") });

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

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

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

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

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

var wait = function(){

var タスク = function(){

alert("実行が完了しました!");

};

setTimeout(タスク,5000);

};

コールバック関数を指定します。どうすればよいでしょうか。

当然、$.when():

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

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

$.when(wait())

.done(function(){alert("はは、成功しました!"); })

.fail(function(){alert("エラー!"); });

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

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

var dtd = $.Deferred() // 新しい遅延オブジェクトを作成します

var wait = function(dtd){

var タスク = function(){

alert("実行が完了しました!");

dtd.resolve(); // 遅延オブジェクトの実行ステータスを変更します

};

setTimeout(タスク,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(); // 新しい遅延オブジェクト

var wait = function(dtd){

var タスク = function(){

alert("実行が完了しました!");

dtd.reject(); // Deferred オブジェクトの実行ステータスを変更します

};

setTimeout(タスク,5000);

dtd を返す;

};

$.when(wait(dtd))

.done(function(){alert("はは、成功しました!"); })

.fail(function(){alert("エラー!"); });

7. deferred.promise() メソッド

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

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

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

var dtd = $.Deferred() // 新しい Deferred オブジェクトを作成します

var wait = function(dtd){

var タスク = function(){

alert("実行が完了しました!");

dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します

};

setTimeout(タスク,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 タスク = function(){

alert("実行が完了しました!");

dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します

};

setTimeout(タスク,5000);

return dtd.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 タスク = function(){

alert("実行が完了しました!");

dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します

};

setTimeout(タスク,5000);

return dtd.promise(); // プロミスオブジェクトを返します

};

$.when(wait())

.done(function(){alert("はは、成功しました!"); })

.fail(function(){alert("Error!"); });

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

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

現時点では、wait 関数は変更されず、$.Deferred() に直接渡します。

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

$.Deferred(wait)

.done(function(){alert("はは、成功しました!"); })

.fail(function(){alert("エラー!"); });

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

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

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

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

var dtd = $.Deferred(); // Deferred オブジェクトを生成します

var wait = function(dtd){

var タスク = function(){

alert("実行が完了しました!");

dtd.resolve(); // Deferred オブジェクトの実行ステータスを変更します

};

setTimeout(タスク,5000);

};

dtd.promise(wait);

wait.done(function(){alert("はは、成功しました!"); })

.fail(function(){alert("エラー!"); });

待機(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() の逆です。呼び出された後、遅延オブジェクトの実行ステータスは「失敗」に変更され、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("実行されました!");} );