ホームページ > ウェブフロントエンド > jsチュートリアル > 最適な制御のために Ajax リクエストをシーケンスする方法?

最適な制御のために Ajax リクエストをシーケンスする方法?

Mary-Kate Olsen
リリース: 2024-10-20 12:32:02
オリジナル
623 人が閲覧しました

How to Sequence Ajax Requests for Optimal Control?

Ajax リクエストのシーケンス

コレクションを反復処理し、要素ごとに個別の Ajax 呼び出しを行う場合、シーケンスを制御することが不可欠です。サーバーの過負荷やブラウザのフリーズを防ぎます。カスタム イテレータを使用することもできますが、より洗練されたソリューションも利用できます。

jQuery 1.5

jQuery 1.5 以降では、$.ajaxQueue() プラグイン$.Deferred、$.queue()、および $.ajax() を利用してリクエストのシーケンスを管理し、リクエストの完了時に解決される Promise を提供します。

実装:

<br>(function($) {</p>
<p>var ajaxQueue = $({});</p>
<p>$.ajaxQueue = function( ajaxOpts ) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var jqXHR,
    dfd = $.Deferred(),
    promise = dfd.promise();

ajaxQueue.queue( doRequest );

promise.abort = function( statusText ) {
  if ( jqXHR ) {
    return jqXHR.abort( statusText );
  }
  var queue = ajaxQueue.queue(),
      index = $.inArray( doRequest, queue );
  if ( index > -1 ) {
    queue.splice( index, 1 );
  }
  dfd.rejectWith( ajaxOpts.context || ajaxOpts,
    [ promise, statusText, "" ] );
  return promise;
};

function doRequest( next ) {
  jqXHR = $.ajax( ajaxOpts )
    .done( dfd.resolve )
    .fail( dfd.reject )
    .then( next, next );
}

return promise;
ログイン後にコピー

};

})(jQuery);

jQuery 1.4

jQuery 1.4 の場合、アニメーション キューをカスタムの「キュー」の作成に利用できます。 jQuery の「fx」キューを使用して、キュー内の最初のリクエストがまだ実行されていない場合に自動的に開始する独自の $.ajaxQueue() プラグインを作成することもできます。

実装:

<br>(function($) {<br> var ajaxQueue = $({});</p>
<p>$.ajaxQueue = function(ajaxOpts) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var oldComplete = ajaxOpts.complete;

ajaxQueue.queue(function(next) {
  ajaxOpts.complete = function() {
    if (oldComplete) oldComplete.apply(this, arguments);
    next();
  };
  $.ajax(ajaxOpts);
});
ログイン後にコピー

};

})(jQuery);

例:

<br>$("#items li").each(function(idx) {<br> $.ajaxQueue({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">url: '/echo/html/',
data: {html : "["+idx+"] "+$(this).html()},
type: 'POST',
success: function(data) {
  $("#output").append($("<li>", { html: data }));
}
ログイン後にコピー

});
});

これにより、各 Ajax リクエストが順番に実行されるようになり、サーバーの負荷を適切に処理し、ブラウザの応答性を維持できるようになります。

以上が最適な制御のために Ajax リクエストをシーケンスする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
前の記事:Google Chrome の Console.log() で配列とオブジェクトの動作が一貫しない原因は何ですか? 次の記事:ES6 クラスは本当に JavaScript のプロトタイプ パターンのより美しいバージョンにすぎないのでしょうか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート