Abort all async request

Question

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:

That's interesting, I didn't notice. Though I am not sure where the logic can go wrong. The code is all that I posted. Inside test.php is only one line: "echo Ajax return for ". — abdfahim, Feb 04 '16 at 05:34
15 calls ... result 2 returned, 7 x abort, 6 x return after abort - numbers add up, something isn't right ... `console.log(xhrPool.slice())` at the top of the `abortAjax` function to see what's happening (the .slice is to get a snapshot) — Jaromanda X, Feb 04 '16 at 05:37
refer these links http://jsfiddle.net/s4pbn/3/ second one http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery — Arunprasanth K V, Feb 04 '16 at 05:37
@Jaromanda X .. added in the code. You can check the link http://mylibrarymanager.com/call.php — abdfahim, Feb 04 '16 at 05:43
Yeah, it's always every second one does not abort - sometimes odd, sometimes even, but half the "aborts" are ignored! — Jaromanda X, Feb 04 '16 at 05:53
@Arunprasanth KV .. I believe mine is identical to those examples ... — abdfahim, Feb 04 '16 at 06:07

score 4 · Accepted Answer · answered Feb 04 '16 at 05:54

4

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

answered Feb 04 '16 at 05:54

Jaromanda X

53,868
5
73
87

Interesting thing is, there are so many tutorial/examples over internet which i have been reading through all morning, and nobody used that slice() command. A big thumbs up for the catch. – abdfahim Feb 04 '16 at 06:11
1

I'm not sure I can explain it more than what I said in the answer. One way to test my theory is to put console.logs in the abort loop, and in the `complete: function` (again, use .slice to get a snapshot of the current state of the array), and observe the sequence of events as they unfold – Jaromanda X Feb 04 '16 at 07:06

Abort all async request

1 Answers1