jquerのajaxQueueの簡単な実装 code_jquery

複雑なことは何もありません。配列オブジェクトを使用して、Ajax リクエストの順序をキューに入れて維持するだけです。コードは以下のとおりです。

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

;(function ($) {
$.ajaxQueue = {
// Ajax リクエストのキューを管理します
requests: new Array(),
// 送信する Ajax リクエストをキューに追加します
offer: function(options) {
var _self = this,
// complete メソッドと beforeSend メソッドを「ハイジャック」し、キュー処理メソッド Paul
xhrOptions = $.extend({}, options) を追加します, {
// リクエストが完了した場合、次のリクエストを送信します
complete: function(jqXHR, textStatus) {
if(options.complete)
options.complete.call(this, jqXHR , textStatus);
_self.poll ();
},
// リクエストがキャンセルされた場合は、次のリクエストの送信を続行します。
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
if(ret === false) {
_self.poll(); ret;
}
}
this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax( xhrOptions);
}
},
//FIFO モードで Ajax リクエストを送信
poll: function() {
if(this.isEmpty()) {
return null;
}
var requestedRequest = this.shift();
var nextRequest = this.peek();
$.ajax(nextRequest) ;
}
return
},
// キューの先頭にある ajax リクエストを返します
peek: function() {
if(this.isEmpty() ) {
return null;
}
var nextRequest = this.requests[0]
return
},
// キューが空かどうかを判断します
isEmpty: function() {
return this.requests.length = = 0;
}
})(jQuery);
これを使用するには、$.ajaxQueue.offer(settings) を使用します。設定の構成は jQuery ドキュメントと一致しています。
ご興味がございましたら、私の
jsFiddle 共有
をクリックして、オンラインで実行したり、変更したりすることができます。最後に質問がある場合は、お気軽にご相談ください:)