jquery abort() ajax request before sending another

Question

Hello,

Based on: http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery... In inventory_search() - before the ajax request is made, how can I check for any current requests and abort() them before making a new request? Or... Is there a better way to do this?

<script type="text/javascript">

    $(function() {
        $('form#internal_catalog').change(function() {
            inventory_search();
        });
    });

    function inventory_search() {
        var search_data = $('form#internal_catalog').serialize();
        var a = $.ajax({
            type: 'post',
            url: '/test.php',
            data: search_data,
            success: function(data) {
                $('#catalog').html(data);
            }
        });
    }

</script>

Answer 1

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.

Answer 2

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: http://stackoverflow.com/questions/3251290/how-to-avoid-3-ajax-calls/3251360#3251360

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.

Answer 3

Pretty easy with jQuery AjaxManager Plugin which i use here

$.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) {}});