I am using the ajaxQueue mentioned in the example Queueing something like Ajax Calls:
// jQuery on an empty object, we are going to use this as our queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
// Hold the original complete function.
var oldComplete = ajaxOpts.complete;
// Queue our ajax request.
ajaxQueue.queue(function( next ) {
// Create a complete callback to fire the next event in the queue.
ajaxOpts.complete = function() {
// Fire the original complete if it was there.
if ( oldComplete ) {
oldComplete.apply( this, arguments );
}
// Run the next query in the queue.
next();
};
// Run the query.
$.ajax( ajaxOpts );
});
};
I also have a function to make the Ajax Call and append the result to a div (simplified):
function ajaxCall() {
$.ajaxQueue({
type: “POST”,
url: myURL,
async: true,
cache: false,
success: function( result ) {
$(‘#divID’).append($(‘
}
});
}
Then on a click event I loop through the ajax call (simplified):
$(“#btn”).on(“click”, function() {
// ( ??? ) Dequeue the ajaxQueue
$(‘#divID’).html(”); // Clear current results
for(var i=0; i<15; i++) {
ajaxCall();
}
});
The Problem
If a user clicks on the link while the queue is still running, a new queue of ajax calls is added up, resulting to more results than expected. I need to clear the queue on click, before a new loop starts.
Here is a jsFiddle Demo.
Any recommendations very much appreciated.