I want to make improvements when I have nothing to do during the holidays. There are not many changes, mainly including the following three points:
The complete callback can be a Function Array after jquery1.5 and called in the array order.
If the previous request is not returned and a new request is sent, revoke the previous request, that is, the new request overwrites the original request.
It is written as an object-oriented form and then managed with an AjaxManage.
The Code is as follows:
Copy codeThe Code is as follows:; (function ($ ){
// Override: whether the new request must overwrite the previous one.
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 ){
// When complete is supported as 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 );
}
// Processing ends. The next ajax request is sent 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, send an ajax request
If (ret = false ){
_ Self. poll ();
Return ret;
}
}
});
// If overwriting is supported, replace is called.
If (this. override ){
// Console. log ('go override ');
This. replace (xhrOptions );
// Put the data 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 jquery source code
PrevRet. abort ();
}
This. requests. shift ();
This. requests. push ($. ajax (xhrOptions ));
},
// Send the next request in the polling queue
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 in the queue Header
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 = {};
// Manage simple objects of AjaxQueue
Var AjaxManager = {
// Create a new ajaxQueue
CreateQueue: function (name, override ){
Return queue [name] = new AjaxQueue (override );
},
// Clear the ajaxQueue of the corresponding name
DestroyQueue: function (name ){
If (queue [name]) {
Queue [name] = null;
Delete queue [name];
}
},
// Obtain the corresponding ajaxQueue according to the name
GetQueue: function (name ){
Return (queue [name]? Queue [name]: null );
}
};
// Associate with jQuery for short, which is convenient to call
$. AM = AjaxManager;
}) (JQuery );
In fact, I also want to add done, fail, always and other configurations, but it may become a bit complicated, so we should keep it simple first.
Here there are two my jsfiddle pages, one is the coverage effect, the other is the queue effect, you can directly test and run.
Here, if you have any questions, please point out thanks.