jQuery, Dequeue an ajaxQueue

Question

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($('<div/>').html($(result).html()).fadeIn(200));
        }
    });
}

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.

Answer 1

Use clearQueue:

ajaxQueue.clearQueue();

EDIT

The problem is there might still be an ajax request being called.

So you might want to keep track of the current request:

currentRequest = $.ajax( ajaxOpts );

And abort this one when clearing the queue:

if (currentRequest) {
    currentRequest.abort();
}

See http://jsfiddle.net/4AQ9N/6/