JavaScript:在 HttpRequest 完成之前不要卸载文档

Question

我需要确保当有人重新加载或关闭我的页面时，他们的进度会被保存。为了保存进度，我通过 XMLHttpRequest() 执行了一个 POST，将数据发送到服务器。我在 window.onbeforeunload 事件中触发此 saveData() 函数。

问题是，saveData() 进行了一些计算，然后调用了 sendData(content) 以最终实际发布数据。如果我正在处理和发送的数据很大(>100kB)，窗口似乎会在所有数据到达服务器之前关闭。 (我正在发送一张图片，有时我只收到另一边的一半)

http 请求是同步的，xhr.open("POST", url, false)，但这似乎并没有解决它。

所以我的问题是，如何防止 onbeforeunload 函数终止，直到 xhr.readyState == 4？我如何让它等待该事件？

哦，setTimeout() 将不起作用。窗口将在“时间”到来之前关闭。

这行不通:

if (!jQuery) {
    setTimeout(attachCode, 100);
    return;
} else {
    // continue and close
}

感谢您的任何见解!

PS:这不应该是“不好的做法”，因为它只需要几秒钟，而且我不希望用户必须手动保存。此外，在他工作时保存(例如，在他关闭窗口之前)会降低应用程序的速度，所以我不能这样做。

[编辑] 作为临时措施，我求助于使用 this trick如果用户决定留在页面上，则自动保存数据。但是，我真的不想使用任何警报消息。 :(

Answer 1

不允许浏览器执行其正常行为通常不是一个好主意。使用 onbeforeunload 你不能暂停卸载，你只能让用户知道他/她正在离开页面，然后让他们决定是否离开页面 - 因此数据未保存。

因此，根据您的情况，我会建议草稿自动保存，就像您在 Google 文档中看到的那样 + 当用户离开带有未保存数据的页面时发出警告。