Home > Web Front-end > JS Tutorial > body text

jQuery AjaxQueue improvement steps_jquery

WBOY
Release: 2016-05-16 18:01:22
Original
961 people have browsed it

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:

Copy the code The code is as follows:

; (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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template