jQuery: Automatically abort AjaxRequests on Page Unload?

Question

Thanks for reading.

I've noticed that if I have a page that has one or more ajax requests open, and I click a link to leave a page, or refresh it, it will wait for the ajax requests to complete before unloading.

This isn't usually an issue, but if the request takes a while, it can be.

I'm looking for something like:

$(window).bind("beforeunload", function() {AjaxRequest.abort();});

to automatically abort requests before unload, but not quite sure how to find the ajax requests. Would they be under window somewhere?

Answer 1

The following code is tested and aborts all outstanding jQuery ajax requests on page unload in Chrome, but it gets used by Edge and IE using clients as well without error.

Put the following as the first jQuery ready handler:

$(onPageLoaded)

And put this somewhere accessible:

function onPageLoaded() {
    var jqxhrs = [];

    $(window).bind("beforeunload", function (event) {
        $.each(jqxhrs, function (idx, jqxhr) {
            if (jqxhr)
                jqxhr.abort();
        });
    });

    function registerJqxhr(event, jqxhr, settings) {
        jqxhrs.push(jqxhr);
    }

    function unregisterJqxhr(event, jqxhr, settings) {
        var idx = $.inArray(jqxhr, jqxhrs);
        jqxhrs.splice(idx, 1);
    }

    $(document).ajaxSend(registerJqxhr);
    $(document).ajaxComplete(unregisterJqxhr);
};

Answer 2

You have to persist all you ajax request and when page is being reloading abort all requests. Sample

var _requests = [];

var _abortAllRequests = function () {
    $(_requests).each(function (i, xhr) { xhr.abort(); });

    _requests = [];
}

$(window).on("beforeunload", function () { 
    _abortAllRequests();
});

somewhere in your code

 _requests.push($.ajax(...))

Additionally you can pop done requests using $.ajaxSetup with events ajaxStart ajaxStop, but its up to you