I thought about improvements during the holidays when I had nothing to do. There are not many places to change, mainly the following three points:
The complete callback can be an array of functions after jquery 1.5, which is called in array order.
If the previous request does not return and a new request is issued, the previous request will be revoked, that is, the new request will "overwrite" the original request.
Written in object-oriented form, and then use an AjaxManage for simple management.
The code is as follows, please see the comments for details:
; (function($) {
// override: whether the new request should overwrite the previous request
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) {
// Supports the case where complete is a function array
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);
}
//End of processing, issue the next ajax request from the queue
_self.poll();
},
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
// If currently The ajax request was canceled for some reason, then send the next ajax request
if(ret === false) {
_self.poll();
return ret;
}
}
});
// If override is supported, call replace
if(this.override) {
// console.log('go override');
this. replace(xhrOptions);
// Otherwise put it in the queue
} else {
// console.log('go queue');
this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax(xhrOptions);
}
}
},
// Cancel the previous request and send a new request
replace: function(xhrOptions) {
var prevRet = this.peek();
if(prevRet != null) {
// This method can be seen in the jquery source code
prevRet. abort();
}
this.requests.shift();
this.requests.push($.ajax(xhrOptions));
},
// Poll queue send Next request
poll: function() {
if(this.isEmpty()) {
return null;
}
var processedRequest = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest);
}
return processedRequest;
},
/ / Return the request at the head of the queue
peek: function() {
if(this.isEmpty()) {
return null;
}
var nextRequest = this.requests[0] ;
return nextRequest;
},
// Determine whether the queue is empty
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {};
// Simple object to manage AjaxQueue
var AjaxManager = {
// Create a new ajaxQueue
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override);
},
// Clear the ajaxQueue corresponding to name
destroyQueue: function(name) {
if(queue[name]) {
queue[name] = null;
delete queue[name];
}
},
// Get the corresponding ajaxQueue according to name
getQueue: function(name) {
return ( queue[name] ? queue[name] : null);
}
};
// Associated with jQuery, give a short name for easy calling
$.AM = AjaxManager;
})(jQuery);
In fact, I also want to add done, fail, always and other configurations, but it may become a bit complicated, so keep it simple for now
Here I have two jsfiddle pages, one with
overlay effect and one with
queue effect, which can be tested and run directly.
That’s it. If you have any questions, please point them out, thanks.