jQuery AjaxQueue改善手順
3392 ワード
休みの中で用事がなくて改善したいと思って、場所を変えるのは多くなくて、主に以下の3点があります:
completeコールバックはjquery 1.5以降は関数配列であり、配列順に呼び出されます.
前のリクエストが返されずに新しいリクエストが発行された場合、前のリクエスト、すなわち新しいリクエストが元のリクエストを上書きします.
オブジェクト向けに作成し、AjaxManagementで簡単に管理します.
コードは次のとおりです.詳細はコメントを参照してください.
本当はdone、fail、alwaysなどの配置も加えたいのですが、少し複雑になるかもしれませんので、まず簡単にしておきましょう
ここには私のjsfiddleページが2つあります.1つはオーバーライド効果で、1つはキュー効果で、直接テストして実行することができます.
ここまで、問題があれば、指摘を歓迎します.thanks.
completeコールバックはjquery 1.5以降は関数配列であり、配列順に呼び出されます.
前のリクエストが返されずに新しいリクエストが発行された場合、前のリクエスト、すなわち新しいリクエストが元のリクエストを上書きします.
オブジェクト向けに作成し、AjaxManagementで簡単に管理します.
コードは次のとおりです.詳細はコメントを参照してください.
;(function($) {
// override:
function AjaxQueue(override) {
this.override = !!override;
};
AjaxQueue.prototype = {
requests: new Array(),
offer: function(options) {
var _self = this;
var xhrOptions = $.extend({}, options, {
complete: function(jqXHR, textStatus) {
// complete
if($.isArray(options.complete)) {
var funcs = options.complete;
for(var i = 0, len = funcs.length; i < len; 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) {
// jquery
prevRet.abort();
}
this.requests.shift();
this.requests.push($.ajax(xhrOptions));
},
//
poll: function() {
if(this.isEmpty()) {
return null;
}
var processedRequest = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest);
}
return processedRequest;
},
//
peek: function() {
if(this.isEmpty()) {
return null;
}
var nextRequest = this.requests[0];
return nextRequest;
},
//
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {};
// AjaxQueue
var AjaxManager = {
// ajaxQueue
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override);
},
// name ajaxQueue
destroyQueue: function(name) {
if(queue[name]) {
queue[name] = null;
delete queue[name];
}
},
// name ajaxQueue
getQueue: function(name) {
return ( queue[name] ? queue[name] : null);
}
};
// jQuery , ,
$.AM = AjaxManager;
})(jQuery);
本当はdone、fail、alwaysなどの配置も加えたいのですが、少し複雑になるかもしれませんので、まず簡単にしておきましょう
ここには私のjsfiddleページが2つあります.1つはオーバーライド効果で、1つはキュー効果で、直接テストして実行することができます.
ここまで、問題があれば、指摘を歓迎します.thanks.