jQuery abort all AJAX requests(query) on click of a button

Question

How can I cancel/abort/stop all AJAX requests/query that I have not yet received the response with button or some click event? Because I make multiple AJAX calls. Here is my code:

function makeCalls() {
    var urls = ["url1.php", "url2.php", "url3.php", "url4.php"];
    $.each(urls, function(index, value) {
        $.ajax({
            global: false,
            type: 'POST',
            url: value,
            dataType: 'html',
            data: returnData(),
            cache: false,
            timeout: 60000,
            success: function(result) {         
                switch(value) {
                    case "url1.php":
                        // my code for url1 
                    case "url2.php":
                        // my code for url2 
                    case "url3.php":
                        // my code for url3 
                    case "url4.php":
                        // my code for url4 
                }
            },
            error: function (request, status, error) {
                console.log('ERROR: ' + request.responseText);
            }
        });
    });
}

possibly a duplicate of http://stackoverflow.com/questions/4551175/how-to-cancel-abort-jquery-ajax-request — Mohit Bhardwaj, May 03 '16 at 11:44
@Mike This AJAX request is a function, I want to have a some button that when I pressed all AJAX to stop. I read all post from stackoverflow.... — diank, May 03 '16 at 11:46
you can simply keep a global array for all requests e.g. ajaxRequestsArray = []; Then whenever you make an ajax request, push its reference in this array. On the click of your desired button, loop through this array and abort each request one by one. — Mohit Bhardwaj, May 03 '16 at 11:49
@Mike okay, can you post some code because I can not understand you very well? — diank, May 03 '16 at 11:51

score 3 · Accepted Answer · answered May 03 '16 at 11:57

var ajaxRequestsArray = [];

function makeCalls() {
    var urls = ["url1.php", "url2.php", "url3.php", "url4.php"];
    $.each(urls, function(index, value) {
     var ajaxRequest = $.ajax({
            global: false,
            type: 'POST',
            url: value,
            dataType: 'html',
            data: returnData(),
            cache: false,
            timeout: 60000,
            success: function(result) {         
                switch(value) {
                    case "url1.php":
                        // my code for url1 
                    case "url2.php":
                        // my code for url2 
                    case "url3.php":
                        // my code for url3 
                    case "url4.php":
                        // my code for url4 
                }
            },
            error: function (request, status, error) {
                console.log('ERROR: ' + request.responseText);
            }
        });
       ajaxRequestsArray.push( ajaxRequest );
    });
}//makeCalls()

Now suppose this is your button:

<a href="#" id="abort-all-ajax" title="Abort all requests">Abort all requests</a>

$("#abort-all-ajax").on("click", function(e){
    e.preventDefault();
    for(var i = 0; i < ajaxRequestsArray.length; i++ )
    {
      var curRequest = ajaxRequestsArray[i];
      curRequest.abort();
    }//for()

});//click handler

it say "ajaxRequest is not defined" in "ajaxRequestsArray.push( ajaxRequest );" — diank, May 03 '16 at 12:03
"ajaxRequest is not defined" or "ajaxRequest is not defined"? Make sure you are not pushing ajaxRequests but ajaxRequest. — Mohit Bhardwaj, May 03 '16 at 12:04
you may also refer to this JSFiddle http://jsfiddle.net/s4pbn/3/ . That's not my code but achieves the same result. — Mohit Bhardwaj, May 03 '16 at 12:06

jQuery abort all AJAX requests(query) on click of a button

1 Answers1