jquery – 具有“卸载”事件的自动保存和注销时的ajax调用：操作顺序导致问题

我在线编辑器上使用AutoSave功能.

当用户离开页面(用unload或beforeunload事件检测到)时,我发送一个AJAX请求(async = false)来保存数据.

我有一个问题在Firefox和有时在Chrome,因为事件发生的系列事件：

>事件被触发
>请求发送
>页面更改,用户断开连接
>请求由服务器分析=>问题！
>请求响应由浏览器接收

由于用户已断开连接,“保存”请求无法处理.

有没有办法与所有浏览器兼容,等待AJAX​​调用的响应,在页面实际更改之前？

解决方法

ori的答案是正确和完整的.

但从您的情况来看,您可以使用解决方法.

您可能会感兴趣的JavaScript功能有两个：
localStorage和sessionStorage(除了第二个在浏览器关闭之外,它们是一样的,所以你可以选择第一个)

这个想法是将数据保存到localStorage,并附上一些元数据,说明是否保存了更改.如果用户离开页面,但转到服务中的另一个页面,甚至稍后返回 – 您可以再次发送一些由于页面卸载而未保存的信息.

概念证明代码：

$(window).bind('unload',function() {
    localStorage.setItem('unsavedData',data);
    localStorage.setItem('unsaved',true);
});

$(document).ready(function(){
    if(localStorage.getItem('unsaved')){
       //ajax send 
       localStorage.setItem('unsaved',false);
    }
});

[编辑]

我已经成功地使用JSONP卸载,它似乎在大多数时间工作,但是我没有在负载和慢速网络下测试它.