jQuery AjaxQueue improvement steps_jquery
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.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

Matter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction. Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a

This article demonstrates how to automatically refresh a div's content every 5 seconds using jQuery and AJAX. The example fetches and displays the latest blog posts from an RSS feed, along with the last refresh timestamp. A loading image is optiona

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.
