jquery abort() ajax request before sending another

Question

Based on: Abort Ajax requests 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>

score 61 · Accepted Answer · edited May 23 '17 at 12:16

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.

score 23 · Answer 2 · answered Jul 31 '12 at 14:34

23

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);
        }
    });
}

answered Jul 31 '12 at 14:34

Rob Forrest

7,329
7
52
69

1

+1 I do it using exactly the same method. (except the `ajax_request` var name ^^)... And it works fine! – JoDev Apr 23 '13 at 09:15
I have just changed `var ajax_request;` to `var ajax_request = new XMLHttpRequest();` and it working. +1 for the idea. – smartrahat Nov 08 '17 at 17:57

score 4 · Answer 3 · edited Sep 23 '17 at 12:17

4

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

edited Sep 23 '17 at 12:17

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jul 23 '10 at 05:36

Komang

5,004
4
29
33

score 2 · Answer 4 · answered Jul 22 '10 at 20:14

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.

jquery abort() ajax request before sending another

4 Answers4

Linked