jquery abort() ajax request before sending another

Create an array queue of all your requests. Then if you find a point where you need to abort all existing requests you can just loop through the array and call abort on all pending requests. Should be pretty simple.

Though the other way is to just keep an internal flag that indicates whether a request is currently in process and skip the request if there is one. Or handle how you see fit.

EDIT: Check this SO question for a similar situation: How to avoid 3 ajax calls?

EDIT 2: So I what you can do is have an array that you append all your ajax calls to. Which is essentially just making an XmlHttpRequest and that is what is returned from the ajax call. So

requests.push(
    $.ajax({
        type: 'post',
        url: '/test.php',
        data: search_data,
        success: function(data) {
            $('#catalog').html(data);
        }
    }));

This will add all your requests to a requests array which you can define somewhere. Then when you want to kill all pending requests you can just loop through the array and call abort which will kill the request.

for(var i = 0; i < requests.length; i++)
    requests[i].abort();

Or just define a variable outside of your function that is a flag indicating whether a request is being made. You can even make it more specific and store the search data and only skip requests that have a pending request for the same data and allow other requests that are for different data.

Hopefully that is enough to get you started.

Spinon's answer is great for aborting all ajax queries but not great for keeping track of just one.

I often find myself doing something like

var ajax_request;
function do_something()
{
    if(typeof ajax_request !== 'undefined')
        ajax_request.abort();
    ajax_request = $.ajax({
        type: 'post',
        url: '/test.php',
        data: search_data,
        success: function(data) {
            $('#catalog').html(data);
        }
    });
}

Pretty easy with jQuery AjaxManager Plugin:

$.manageAjax.create('unique_identifier',{
queue:'clear',cacheResponse:false,maxRequests:1,abortOld:true
});
jQuery.manageAjax.abort('unique_identifier');
jQuery.manageAjax.clear('unique_identifier');
jQuery.manageAjax.add('unique_identifier',{success: function(data) {}});

Use a global variable to hold the handle of the current request. In this case declare the var a out side the function and make it global. Before calling the ajax check it is not null. If it is not null abort it other wise assign it with new ajax. In the success/complete event make sure you clear the variable a. May not be best solution out there, but works best.