Browsers continue to perform Javascript after "PageUnload" & new "PageLoad"

Question

We have the following AJAX throttler. This was implemented to be able to perform many (20+) ajax requests for one page without the remainder timing out just because the first X requests took a total of 60 seconds. ``` RequestThrottler: { maximumConcurrentRequests: 3, //default to 3 requestQueue: new Array(), numberOfRequestCurrentlyProcessing: 0, addRequestToQueue: function (currentRequest) { var self = this; self.requestQueue.push(currentRequest); if (self.numberOfRequestCurrentlyProcessing < self.maximumConcurrentRequests) { self.sendNextRequest(); } }, sendNextRequest: function () { var self = this; if (self.numberOfRequestCurrentlyProcessing >= self.maximumConcurrentRequests) { return; } if (self.requestQueue.length === 0) { return; } var currentRequest = self.requestQueue.pop(); self.numberOfRequestCurrentlyProcessing++; AJAX.SendAjaxRequest(currentRequest.url, currentRequest.httpMethod, function(data){ self.numberOfRequestCurrentlyProcessing--; currentRequest.onSuccessCallback(d…

Accepted Answer

A clean solution would be to listen to the `window.onbeforeunload` event to `abort` any ajax requests that have yet to receive a response.

- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

- Abort Ajax requests using jQuery

- jQuery: Automatically abort AjaxRequests on Page Unload?

The `beforeunload` event should be used rather than `unload` for the following reasons:

1) The `beforeunload` event is more reliable than `unload` event:

The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers, and contrasted with the proprietary beforeunload event.

source:

- http://api.jquery.com/unload/

- jquery: unload or beforeunload?

2) The `beforeunload` event can be cancelled whereas the `unload` event cannot be cancelled. This would give you the flexibility if you wanted to prompt the user when beforeunload event takes place. The confirmation will ask the user if they would like to continue to navigate to the other page or if they would like to cancel because not all ajax requests have completed.

```
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

(e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;                                // Gecko and WebKit
});
```

sources:

- https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

- https://developer.mozilla.org/en-US/docs/Web/Events/unload

Browsers continue to perform Javascript after "PageUnload" & new "PageLoad"

Solution

Problem

Related problems