jquery での遅延オブジェクトの使用法の概要 (例付き)

この記事では、jquery での遅延オブジェクトの使用法を紹介します (例とともに)。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

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

jQuery 1.5 で導入された遅延オブジェクトは、jQuery.Deferred() メソッドを呼び出してチェーン可能なツール オブジェクトを作成します。複数のコールバックをコールバック キューに登録し、コールバック キューを呼び出し、同期関数または非同期関数の成功または失敗のステータスを置き換える準備をすることができます。 ——jQuery API 中国語ドキュメント 簡単に言えば、遅延オブジェクトは jQuery のコールバック関数ソリューションです。英語で defer は「遅延」を意味するため、deferred オブジェクトの意味は、将来の特定の時点まで実行を「遅らせる」ことです。これは、時間のかかる操作をどのように処理するかという問題を解決し、それらの操作をより適切に制御し、統一されたプログラミング インターフェイスを提供します。 ——Ruan Yifeng

遅延オブジェクトのメイン関数

ajax 操作のチェーン記述メソッド

$.ajax("test.html")
　  .done(function(){ alert("success"); })
　  .fail(function(){ alert("error"); });

$.ajax() 操作後の1.5.0 より前のバージョンの jQuery を使用している場合は、XHR オブジェクトが返され、連鎖操作は実行できません。1.5.0 より高いバージョンの場合は、遅延オブジェクトが返され、連鎖操作が可能です。 。ご覧のとおり、done() は success メソッドに相当し、fail() は error メソッドに相当します。チェーンライティング方式の採用により、コードの可読性が大幅に向上しました。

ここでは jqXHR オブジェクトを強調します。jQuery 1.5 以降、$.ajax() によって返される jqXHR オブジェクト自体は遅延オブジェクトであるため、上記のコードのようにチェーンで呼び出すことができます。

jQuery 1.5 以降、$.ajax() によって返される jqXHR オブジェクトは Promise インターフェイスを実装するため、Promise のすべてのプロパティ、メソッド、および動作が含まれます。 (詳細については、「遅延オブジェクト」を参照してください)。 $.ajax()でコールバック関数の名前を統一して使いやすくするため。 jqXHR は、.error()、.success()、および .complete() メソッドも提供します。これらのメソッドはすべて関数であるパラメーターを受け取ります。この関数は $.ajax() リクエストの最後に呼び出され、この関数によって受け取られるパラメーターは $.ajax() 関数が呼び出されたときのパラメーターと一致します。 。これにより、1 つのリクエストで複数のコールバック関数に割り当てることができ、リクエストが完了した後にコールバック関数に割り当てることもできます (リクエストが完了した場合、コールバック関数はすぐに呼び出されます)。

注: jqXHR.success()、jqXHR.error()、および jqXHR.complete() コールバックは、jQuery 1.8 から非推奨となり、jQuery 3.0 から削除されます。jqXHR.done ()、jqXHR を使用できます。 .fail()、および代わりに jqXHR.always() を使用してください。

同じ操作に複数のコールバック関数を指定する
遅延オブジェクトの大きな利点の 1 つは、複数のコールバック関数を自由に追加できることです。上記のコードを例に挙げると、ajax 操作が成功した後、元のコールバック関数に加えて別のコールバック関数も実行したい場合、どうすればよいでしょうか?とても簡単なので最後に追加するだけです。

$.ajax("test.html")
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); })
　   .done(function(){ alert('第二个回调函数！'); });

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

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

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

$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

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

$.when() このメソッドの使用方法の詳細については、ドキュメントを参照してください。

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

時間のかかる操作待機のコールバック関数を指定する具体的な例を見てみましょう:

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

    setTimeout(tasks, 5000);
    return dtd.promise(); // 返回promise对象
};

$.when(wait())
    .done(function () { alert('success'); })
    .fail(function () { alert('error'); });

もう 1 つの方法は、待機関数を $.Deferred () に直接渡すことです。 :

$.Deferred(wait)
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

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

さらに具体的な情報については、Ruan Yifeng のドキュメントを参照してください。

遅延オブジェクトのメソッド

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

jQuery.Deferred([beforeStart]) ファクトリ関数は、新しい遅延オブジェクトを作成します。

説明: チェーンされたユーティリティ オブジェクトを返すファクトリ関数。リターン オブジェクト メソッドを使用して、コールバック キューに複数のコールバックを登録し、コールバック キューを呼び出し、同期関数または非同期関数の成功または失敗のステータスを渡します。 . .

beforeStart: Function(Deferred deferred) と入力します。以前に呼び出された関数を返すコンストラクターです。

jQuery.Deferred 方法可以传递一个可选的函数， 这个函数在方法返回之前调用，并且会把新的 deferred（延迟）对象作为 this 对象，将其作为第一个参数传递给函数。例如，被调用的函数可以使用 deferred.then() 绑定回调。

deferred.done() 指定操作成功时的回调函数。

deferred.fail() 指定操作失败时的回调函数。

deferred.promise() 没有参数时，返回一个新的 deferred。 对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署 deferred 接口。

deferred.resolve() 手动改变 deferred 对象的运行状态为"已完成"，从而立即触发 done() 方法。

一个 Deferred（延迟）对象开始于 pending 状态。 任何回调使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到这个对象都是排队等待执行。调用 deferred.resolve() 转换 Deferred（递延）到 resolved（解决）的状态，并立即执行设置中任何的 doneCallbacks。调用 deferred.reject() 转换 Deferred（递延）到 rejected（拒绝）的状态，并立即执行设置中任何的 failCallbacks。一旦对象已经进入了解决或拒绝状态，它处于该状态。回调仍然可以添加到解决或拒绝 Deferred（递延）- 他们会立即执行。

$.ajax() 返回的 jqXHR 对象 会根据请求返回的结果，自动改变自身的执行状态。但是，对于其他通过 $.Deferred() 方法生成的 deferred 对象，它们的执行状态必须由程序员手动指定，由代码决定在什么时候触发回调函数。

deferred.reject() 这个方法与 deferred.resolve() 正好相反，调用后将 deferred 对象的运行状态变为"已失败"，从而立即触发 fail() 方法。

$.when() 为多个操作指定回调函数。

deferred.then() 方法
有时为了省事，可以把 done() 和 fail() 合在一起写，这就是 then() 方法。

$.when($.ajax( '/main.php' ))
　　 .then(successFunc, failureFunc);

如果 then() 有两个参数，那么第一个参数是 done() 方法的回调函数，第二个参数是 fail() 方法的回调方法。如果 then() 只有一个参数，那么等同于 done()。

deferred.always() 方法
这个方法也是用来指定回调函数的，它的作用是，不管调用的是 deferred.resolve() 还是 deferred.reject()，最后总是执行。

$.ajax( 'test.html' )
    .always( function() { alert('已执行！');} );

更多信息请参见 jQuery API中文文档。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

以上がjquery での遅延オブジェクトの使用法の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。