The holiday is nothing but the improvement, change the place is not much, mainly have the following three points:
The complete callback can be an array of functions after jquery1.5, called in array order.
If the previous request is not returned and the new request is issued, then the previous request is revoked, which is the new request "overwrite" the original request.
As an object-oriented form, and then with a ajaxmanage for simple management.
The code is as follows, and you can look at the comments in detail:
Copy Code code as follows:
;(function ($) {
Override: Does the new request 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) {
Support for complete is a function array case
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);
}
Processing ended, issuing 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 the current AJAX request is revoked for some reason, then send the next Ajax request
if (ret = false) {
_self.poll ();
return ret;
}
}
});
If overlay is supported, then call replace
if (this.override) {
Console.log (' Go override ');
This.replace (xhroptions);
Instead put in the queue
} else {
Console.log (' Go queue ');
This.requests.push (xhroptions);
if (this.requests.length = = 1) {
$.ajax (xhroptions);
}
}
},
Undo 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 request to queue header
Peek:function () {
if (This.isempty ()) {
return null;
}
var nextrequest = this.requests[0];
return nextrequest;
},
To determine whether a queue is empty
Isempty:function () {
return this.requests.length = = 0;
}
};
var queue = {};
Simple objects to manage ajaxqueue
var Ajaxmanager = {
Create a new Ajaxqueue
Createqueue:function (name, override) {
return Queue[name] = new Ajaxqueue (override);
},
Clear 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, for short, easy to invoke
$.am = Ajaxmanager;
}) (JQuery);
In fact, also want to add done,fail,always and other configuration, but may become a bit more complicated, just keep it simple
Here are two of my jsfiddle pages, one is the overlay effect, one is the queue effect, you can test the run directly.
Here, if you have any questions, you are welcome to point out that.
