ue jquery ajax,ajax - jQuery, Dequeue an ajaxQueue - Stack Overflow

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.