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
});

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

但是我不确定这是否可靠。

Answer 3

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

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

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

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

3 个答案: