延迟返回等待异步函数（beforeunload 事件）

Question

在这个编码示例中，函数logout() 不会执行所有它的异步调用，也不会等到它们完成——而是在之前卸载页面，因为beforeunload 事件的返回触发了页面卸载。

$(window).on('beforeunload', function(event) {
    event.preventDefault();
    logout();
    return;
});

我想尝试的是事件函数在logout()中的几个异步调用完成后返回。

编辑：我的目标是不显示警报！我只想在页面卸载之前执行一些代码。注销功能可能包含需要完成的 ajax 请求和 jQuery 动画。

我尝试了回调，但最终得到了这个结果，因为它返回的是回调，而不是事件函数，所以不是想要的结果。

$(window).on('beforeunload', function(event) {
    event.preventDefault();
    logout(function(x) { return; });
});

Answer 1

由于页面卸载时页面上执行的所有内容都将变为无效，因此您不能依赖页面本身来完成异步调用。

chrome 扩展 的一个解决方法是使用背景页面。您可以简单地将消息发送到beforeunload 处理程序内的后台页面，捕获您需要处理的所有信息，并在后台页面中执行异步调用。示例代码是：

content.js

window.addEventListener('beforeunload', function() {
    chrome.runtime.sendMessage({ info: "Here is the info you would like to pass to background page"});
});

background.js

chrome.runtime.onMessage.addListener(function(request) {
    // The following is your async call
    logout();
    // Don't forget the following code
    return true;
});

不要忘记在后台页面的事件监听器中返回true，因为当事件监听器返回时chrome.runtime.onMessage.addListener会失效，更多细节见this answer。

Answer 2

尝试为您的处理程序使用async/await，即：

$(window).on('beforeunload', async function(event) {
    await logout();
    event.preventDefault();
    event.returnValue = false; // Seems require this for Chrome
});

当然，你应该从logout()返回Promise；

但我不确定这是否可靠。

Answer 3

不是一个真正干净的解决方案，但您可以尝试 setTimeout 强制代码在注销过程中等待。

var timeToLogoutInMs = 500;
setTimeout(function() {
    // Nothing
}, timeToLogoutInMs);

编辑：为什么需要在 beforeunload 挂钩上执行此操作？为什么不设置手动选项用户退出？