jquery when方法

jQuery は Web 開発で広く使用されている JavaScript ライブラリであり、効率的かつ高速な DOM 操作およびイベント処理機能、および移植可能な AJAX 操作機能を備えています。 whenメソッドは、Promiseをベースとした非同期演算処理方式であり、複数の非同期演算の同期処理を実現することができる。この記事では、jquery の使用方法と一般的なアプリケーション シナリオを紹介します。

1. jquery when メソッドの基本構文
複数の非同期操作を実行し、完了後に次のステップに進む必要がある場合は、jquery when メソッドを使用できます。このメソッドは、Promise オブジェクトを作成してそのオブジェクトを返すことにより、複雑な非同期処理ロジックと対応するコールバック関数のネストを削減できます。

すべての非同期操作が成功した場合、コールバック関数のパラメーターは各非同期操作の結果で構成される配列になります。非同期操作が失敗した場合、コールバック関数は非同期操作の失敗理由を返します。 。このメソッドは、任意の数の非同期操作オブジェクトまたは反復可能オブジェクトをパラメーターとして受け入れることができます。

$.when(非同期操作 1, 非同期操作 2, …).done(

function(异步操作1结果, 异步操作2结果, …) {
    // 在操作1和操作2都成功结束后执行的代码块
}

).fail(

function(错误原因) {
    // 当其他操作失败时执行的代码块
}

);

二, メソッド

1. 次の操作を実行する前に複数の非同期リクエストを完了する必要がある場合の jQuery の一般的な使用シナリオ
   複数の AJAX リクエストを同時に送信することは、Web 開発における一般的な使用例です。応答を受信した後に各リクエストが次のリクエストの処理をトリガーしないようにするには、jquery when メソッドを使用して、すべてのリクエストが完了するまで待機します。例:

varpromise1 = $.ajax({

url: "https://jsonplaceholder.typicode.com/todos/1",
method: "GET"

});

varpromise2 = $.ajax({

url: "https://jsonplaceholder.typicode.com/todos/2",
method: "GET"

##) # });

$.when(promise1, Promise2).done(function(response1, response2) {

console.log(response1[0]); // 输出第一个Ajax响应数据
console.log(response2[0]); // 输出第二个Ajax响应数据

});

いずれかをチェックステージ データの準備はできていますか?
2. 非同期データの読み込み中は、通常、読み込みインジケーターを表示するか、ユーザーが無意味な操作を実行しないようにする必要があります。 jquery when メソッドは、この関数を簡単に実装できます。例:
   

var callback = function() {

console.log("Do other stuff after data is loaded");

};

$.when($. ajax ('/url/to/resource'))

.done(function(response) {
    console.log("Data loaded successfully");
})
.always(callback);

次のステップを実行する前に複数のアニメーションが完了するまで待ちます
3. アニメーションの完了イベントを Promises オブジェクトにカプセル化できます (複数のオブジェクトを一緒に)、次のステップを実行する前にすべてのアニメーションが完了するのを待ちます。例:
   

var anime1 = $elem1.animate({ ... }).promise();

var anime2 = $elem2.animate({ ... }).promise();
var anime3 = $elem3.animate({ ... }).promise();

$ 。 when(animation1, anime2, anime3).done(function() {

console.log("All animations have completed");

});

もちろん、同じ要素上の複数のアニメーションを Promise オブジェクトにカプセル化することもできます。例:

var PromisesArray = [];

promisesArray.push($element1.lay(1000).animate({ ... }).promise());

promisesArray .push($element1.fadeOut().promise());
promisesArray.push($element2.slideUp().promise());

$.when.apply(null , PromiseArray) .done(function() {

console.log("All animations have completed");

});

つまり、jquery when メソッドは、さまざまな非同期操作に適した同期処理ソリューションです。コードはシンプルで簡単です。管理できるため、実際の開発で広く使用されています。この記事が読者に、jquery when メソッドの基本構文と一般的なアプリケーション シナリオについての啓発を提供できれば幸いです。

以上がjquery when方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。