浏览器在 "PageUnload" 和新的 "PageLoad" 之后继续执行 Javascript

Question

我们有以下 AJAX 节流阀。这是为了能够对一个页面执行许多 (20+) ajax 请求而不会因为第一个 X 请求总共花费 60 秒而导致剩余超时。

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(data);
                self.sendNextRequest();
            }, 
            function(){
                self.numberOfRequestCurrentlyProcessing--;
                currentRequest.onErrorCallback();
                self.sendNextRequest();
            });
    },

    sendUpdateRequest: function (currentRequest) {
        var self = this;
        self.addRequestToQueue(currentRequest);
    }
}

但是，由于这些请求位于 Javascript 队列中，因此当用户尝试加载新页面时，开发人员工具会在新页面的 NET 区域中显示响应。出于隐私原因，我们的应用程序进行了检查，不允许这种行为。这对浏览器来说是正常的，还是某种错误，或者我做错了什么？

Answer 1

一个干净的解决方案是监听 window.onbeforeunload 事件到 abort 任何尚未收到响应的 ajax 请求。

• https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
• Abort Ajax requests using jQuery
• jQuery: Automatically abort AjaxRequests on Page Unload?

应使用 beforeunload 事件而不是 unload，原因如下：

1) beforeunload 事件比 unload 事件更可靠：

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.

来源：

• http://api.jquery.com/unload/
• jquery: unload or beforeunload?

2) beforeunload事件可以取消，unload事件不能取消。如果您想在 beforeunload 事件发生时提示用户，这将为您提供灵活性。确认将询问用户是否想继续导航到其他页面，或者他们是否想取消，因为并非所有 ajax 请求都已完成。

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

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

来源：

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