AJAX Streamlining techniques?
Question by Vigrond
My question is a bit abstract.
We’re all familiar with AJAX preloaders/spinners that come up when an AJAX request is being made. My question is how do you avoid these?
Take for example, a sortable list. When a user drags and drops items to resort them, an AJAX call is made to update the order.
Before, I would pop up a fullscreen AJAX spinner to prevent the user from doing anything until the AJAX call was complete.
My question is, how would I go about avoiding the AJAX spinner and “streamlining” ajax requests to ensure if a user initiates 20 ajax requests in 2 seconds, that they will be executed in order?
I don’t really need code examples, just accepted or popular techniques/ideas. Or if I’m going completely off track here.
Thank you
Answer by kitgui.com
So far good answers in terms of using an array or queue to ensure they are loaded and returned one at a time. I would eliminate the spinner all together similar to how gmail does and only message the user only when necessary. There is no point in bothering the user about all these spinner deals. They just look like little robot a-holes anyways. Here is some code to do I whipped up.
Since I got a nod on this I will explain its features.
- Stops queue if error occurs
- Continues queue as success occurs
- Has event handlers for success / error with context
I write plugins so is this an idea worthy of a plugin? I don’t think so but hey you never know.
var queue = [],
doRequest = function(params) {
params.running = true;
$.ajax({
url: params.url,
dataType: 'json',
success: function(d) {
params.success.call(params,d);
queue.unshift(); // Quit counting your change and move along.
if (queue.length > 0) {
doRequest(queue[0]); // Hey buddy, your next.
}
},
error: function(a,b,c) {
params.error.call(params,a,b,c);
alert('"oops"'); // Rick Perry
}
});
},
queueRequest = function(params) {
queue.push(params); // Sir, you'll need to go to the BACK of the line.
if (!queue[0].running) {
doRequest(queue[0]);
}
};
// so to use this little snippit, you just call "queueRequest" like so (over and over)
queueRequest({
url: 'someajax.abc',
success: function(d) {
// let the user know their stuff was saved etc.
// "this" will be the context of the "params"
},
error: function(a,b,c) {
// let the user know something went wrong etc.
// "this" will be the context of the "params"
}
});
And you’re done.
Answer by Starx
Isn’t this exactly why, there is an async option in jquery?
Use async: true to queue up the request.
Spinners are kept to avoid sending same request over and over again. Like take a case, where there is an option to enable and disable a feature… if a user click at the same button again, you are sending same request over and over again. Only use spinners in these cases.
Popping up a big box, to avoid access to the whole page… is just a stupid idea (no offence).
Use spinners, to the specific elements.. that is being processed or manipulated somehow. For the request, just use async…
CASE CLOSED 😉
