jQuery AjaxQueue の改善手順_jquery

何もすることがない休日に改善点を考えました。変更する箇所はそれほど多くありません。主に次の 3 つの点です:
完全なコールバックは、jquery 1.5 以降、配列順序で呼び出される関数の配列にすることができます。 。
前のリクエストが返されず、新しいリクエストが発行された場合、前のリクエストは取り消されます。つまり、新しいリクエストは元のリクエストを「上書き」します。
オブジェクト指向形式で記述されており、簡単な管理のために AjaxManage を使用します。
コードは次のとおりです。詳細についてはコメントを参照してください:

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

; (function($) {
// オーバーライド: 新しいリクエストが前のリクエストを上書きするかどうか
function AjaxQueue(override) {
this.override = !!override ;
};
AjaxQueue.prototype = {
requests: new Array(),
offer: function(options) {
var _self = this; extend({}, options, {
complete: function(jqXHR, textStatus) {
// complete が関数配列である場合をサポートします
if($.isArray(options.complete)) {
var funcs = options.complete;
for(var i = 0, len = funcs.length; i funcs[i].call(this, jqXHR, textStatus); 🎜>} else {
if(options .complete)
options.complete.call(this, jqXHR, textStatus);
}
//処理の終了、次の ajax リクエストをキュー
_self.poll();
},
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
// 現在、ajax リクエストが何らかの理由でキャンセルされた場合、次の ajax リクエストを送信します。
if(ret === false) {
_self.poll(); >return ret;
}
}
});
// オーバーライドがサポートされている場合は、 replace
if(this.override) {
// console.log(' go override');
this.replace(xhrOptions);
// それ以外の場合はキューに入れます
} else {
// console.log('go queue'); this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax(xhrOptions);
} // 前のリクエストをキャンセルし、新しいリクエストを送信します
replace: function(xhrOptions) {
var prevRet = this.peek();
if(prevRet != null) {
// Thisメソッドは、jquery ソース コードで確認できます。
},
// ポーリングキュー送信 次のリクエスト
poll: function() {
if(this.isEmpty()) {
return null;
var処理済みリクエスト = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest); return requestedRequest;
},
/ / キューの先頭にあるリクエストを返します。
peek: function() {
if(this.isEmpty()) {
return null; 🎜>}
var nextRequest = this.requests[0] ;
return
},
// キューが空かどうかを判断します
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {}; // AjaxQueue を管理するための単純なオブジェクト
var AjaxManager = {
//新しい ajaxQueue を作成します
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override);
},
// 名前
に対応する ajaxQueue をクリアしますdestroyQueue: function(name) {
if(queue[name]) {
queue[name] = null;
delete queue[name];
}
/ / 名前に従って対応する ajaxQueue を取得します。
getQueue: function(name) {
return ( queue[name] ? queue[name] : null);
}; jQuery に関連して、呼び出しやすいように短い名前を付けます。
$.AM =
})(jQuery); 実際には、done、fail、も追加したいと思います。 always とその他の設定がありますが、少し複雑になる可能性があるので、今はシンプルにしておきます
ここには 2 つの jsfiddle ページがあり、1 つは
オーバーレイ効果
を持ち、もう 1 つは
キュー効果
を持っています。 、直接テストして実行できます。
それでは、ご質問がございましたら、ご指摘ください。