CODEWITHSUNDEEP
javascriptphpjqueryajax
abdfahim
abdfahim

Reputation: 2553

Abort all async request

In my page, I call 15 ajax request. Also I have a button which cancels all the pending ajax requests. As per documentation, abort() terminates the request if it has already been sent.

Now when I check my console, even after I click cancel button, I get some replies from ajax script (I guess those were already sent by the time I clicked that button). So how can I make sure no reply should come once I press cancel button?

You can check the script here (couldn't use jsfiddle as not sure how to make ajax request).

JS Code

var xhrPool = [];

$(window).load(function(){
        callAjax1();
});

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = xhrPool.indexOf(jqXHR);
        if (index > -1) {
            xhrPool.splice(index, 1);
        }
    }
});

var abortAjax = function () {
    $.each(xhrPool, function(idx, jqXHR) {
        if(jqXHR && jqXHR .readystate != 4){
            jqXHR.abort();
        }
    });
    console.log("All pending cancelled"); // Should not have any ajax return after this point
    $.xhrPool = [];
};

$("#cancel-button").click(function (){
        abortAjax();
});


function callAjax2(ajaxcallid){
    console.log("Initiate ajax call " + ajaxcallid); // Should not have any ajax return after this point
    $.ajax({
        method: "POST",
        url: "test.php"
    })
    .done(function( msg ) {
        console.log(msg + ajaxcallid); // msg = "Ajax return for "
    })
    .fail(function( jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    });
}

function callAjax1(){
    $.ajax({
        method: "POST",
        url: "test.php"
    })
    .done(function( msg ) {
        for(var i = 0; i < 15; i++){
            callAjax2(i);
        }
    })
    .fail(function( jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    });
}

Console Output: enter image description here

Upvotes: 1

Views: 252

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

try this

$.each(xhrPool.slice(), function(idx, jqXHR) {

I think while you are aborting, some are returning, so the array gets messed up

this way you are working with a snapshot of the array

though, one or two may still sneak through due to timing of course

Upvotes: 4

Related Questions