Abort all jQuery AJAX requests globally

Question

Is there a way to abort all Ajax requests globally without a handle on the request object?

The reason I ask is that we have quite a complex application where we are running a number of different Ajax requests in the background by using setTimeOut(). If the user clicks a certain button we need to halt all ongoing requests.

possible duplicate of [Stop all active ajax requests in jQuery](http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery) — Shoban, Aug 11 '10 at 08:07
@shoban, but I think RobertW is asking if there is a way if you do NOT have a handle to them. — 7wp, Aug 11 '10 at 08:10
This question may provide you with what you are looking for http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery — codingbadger, Aug 11 '10 at 08:04

score 13 · Accepted Answer · answered Aug 11 '10 at 08:03

You need to call abort() method:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){..........}
});

After that you can abort the request:

request.abort();

This way you need to create a variable for your ajax request and then you can use the abort method on that to abort the request any time.

Also have a look at:

Aborting Ajax

score 7 · Answer 2 · answered Aug 11 '10 at 08:05

7

You cannot abort all active Ajax requests if you are not tracking the handles to them.

But if you are tracking it, then yes you can do it, by looping through your handlers and calling .abort() on each one.

answered Aug 11 '10 at 08:05

7wp

12,505
20
77
103

score 5 · Answer 3 · edited Nov 11 '15 at 19:39

5

You can use this script:

// $.xhrPool and $.ajaxSetup are the solution
$.xhrPool = [];
$.xhrPool.abortAll = function() {
    $(this).each(function(idx, jqXHR) {
        jqXHR.abort();
    });
    $.xhrPool = [];
};

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

Check the result at http://jsfiddle.net/s4pbn/3/.

edited Nov 11 '15 at 19:39

Peter Mortensen

30,738
21
105
131

answered Dec 17 '12 at 07:22

DJ.

394
5
5

10

You copied [here](http://stackoverflow.com/a/8841412/1767377) and pasted it here. While I appreciate the jsfiddle **-1 because you didn't give credit where credit was due.** And now for a movie quote: "dishonor you, dishonor your cow, dishonor your uncle..." -Mulan – SyntaxRules Aug 08 '13 at 15:53
abortAll method can be used only once here, because $.xhrPool = []; will destroy the method. If you want to be able to use it multiple times you can do $.xhrPool.length = 0; instead – igrek Oct 02 '13 at 11:49
2

Refer to http://stackoverflow.com/questions/1232040/how-to-empty-an-array-in-javascript for details – igrek Oct 02 '13 at 11:54
When you will call the $.xhrPool.abortAll again, it will not work, because you overwrite $.xhrPool with an empty array [] which does not have abortAll property. – Hrishabh Gupta Aug 28 '14 at 10:46
@DJ: I am getting TypeError: jqXHR.abort is not a function error – Shesha Mar 23 '16 at 07:19

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

This answer to a related question is what worked for me:

https://stackoverflow.com/a/10701856/5114

Note the first line where the @grr says: "Using ajaxSetup is not correct"

You can adapt his answer to add your own function to window if you want to call it yourself rather than use window.onbeforeunload as they do.

// Most of this is copied from @grr verbatim:
(function($) {
  var xhrPool = [];
  $(document).ajaxSend(function(e, jqXHR, options){
    xhrPool.push(jqXHR);
  });
  $(document).ajaxComplete(function(e, jqXHR, options) {
    xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
  });
  // I changed the name of the abort function here:
  window.abortAllMyAjaxRequests = function() {
    $.each(xhrPool, function(idx, jqXHR) {
      jqXHR.abort();
    });
  };
})(jQuery);

Then you can call window.abortAllMyAjaxRequests(); to abort them all. Make sure you add a .fail(jqXHRFailCallback) to your ajax requests. The callback will get 'abort' as textStatus so you know what happened:

function jqXHRFailCallback(jqXHR, textStatus){
  // textStatus === 'abort'
}

Using ajaxSetup is not "wrong", but you don't know it's going to cause problems until it does... and sometimes when it does, it's really hard to remember that it's ajaxSetup that's messing with you. :-) +1 to this answer for not using ajaxSetup. — Greg Pettit, Apr 22 '16 at 14:57

Abort all jQuery AJAX requests globally

4 Answers4