JQuery AjaxQueue improvement steps

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.