Question

我有一些网络应用程序。它是基于桌面的。我有一个问题，即在保存数据之前取消操作。我在javascript中使用unload事件将一些数据发送到mixpanel（只是一些ajax调用）。问题是我相信这个请求有时会被“取消”。

有没有办法阻止页面更改，直到我收到回调？除非我能够使呼叫同步，否则我觉得答案是否定的。我不认为我对mixpanel有这种能力。

我目前正在使用mootools中的unload事件。我应该使用beforeunload吗？有没有办法告诉卸载我已经完成了？

Answer 1

简短的回答是否定的。同步ajax似乎是唯一可靠的选择。

如果您正在控制客户端代码，则很容易使其同步。只需添加async: false吨Request个选项即可。服务器不关心。

我们这些习惯于编写异步ajax的人有一个潜在的问题：Request.send()调用之后的任何内容都将在onComplete处理程序完成之后执行。这意味着显示“请稍候......”等详细信息必须首先出现在代码中。对于异步请求，顺序显然无关紧要，并且通常首先发送请求。

对于beforeunload，它可能在这里没用。 beforeunload的值是允许用户取消即将发生的页面加载。如果您不需要此功能，请使用unload。

Answer 2

有一种使用 navigator.sendBeacon 的更新方法。下面设置了一个 mixpanel 事件，用于导航离开页面。

var props = {};
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        mixpanel.track('Page closed', props, {transport: 'sendBeacon'});
    }
});

{transport: 'sendBeacon'} 自 2020 年 1 月起在 mixpanel js 中可用，作为 discussed in this github issue。该讨论中有（建议，在实施之前）片段，但我认为它应该说“beforeunload”而不是“unload”。但后来我发现...

developer.mozilla.org documentation on navigator.sendbeacon includes a very relevant section 建议使用“visibilitychange”而不是“unload”或“beforeunload”来实现此跟踪目的。即使用户切换到不同的选项卡（不完全是“关闭”页面。可能不是预期的），此事件也会触发，但如果移动浏览器用户打开不同的应用程序（可能是）也会触发什么是预期的，因为这几乎是您在移动设备上“关闭”页面的主要方式）。

跟踪Web App页面关闭，AJAX请求已取消

2 个答案: