带有“卸载”事件并在注销时进行ajax调用的自动保存：操作顺序导致问题

问题描述

| 我正在在线编辑器上使用自动保存功能。 当用户离开页面时（检测到“ 0”或“ 1”事件），我正在发送AJAX请求（异步=假）以保存数据。 有时我在Firefox等浏览器中遇到问题，因为发生了一系列事件： 事件触发 请求发送 页面更改和用户断开连接 服务器分析请求=>问题！ 请求浏览器收到的响应 当然，由于用户已断开连接，因此无法处理“保存”请求。 有没有一种与所有浏览器兼容的方法，可以在页面实际更改之前等待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与ѭ0一起使用，并且它在大多数情况下似乎都可以正常工作，但是我还没有在负载和缓慢网络上对其进行测试。     ,        否。您只能向用户显示一个确认对话框：

$(window).bind(\'beforeunload\',function() {
    // AJAX

    return \'STRING\';
});

STRING

将显示在对话框中，然后您可能有时间在用户做出反应之前返回响应。 但这是阻止页面卸载的唯一方法，因此将不会收到ajax响应。     ,        在页面顶部固定的透明div带有悬停事件以触发保存，该怎么办？只是从创意的角度考虑...保留您现在的保存，但作为故障保护，我在考虑普通用户是否要离开，首先他们将鼠标移至地址栏，然后返回按钮或关闭按钮。如果您捕获了DOM窗口的顶部，也许可以在最后一刻获得更多成功？ 另外，您可以将更改推到ѭ6上，但是听起来您要比我的两个解决方案都更加有限。     ,        将async设为false会更容易。 否则，您可以使用async：true调用服务器，当服务器成功返回或返回错误时，您可以引发用于注销/重定向/错误消息的自定义事件。 透明的div悬停可用于使用户等待服务器响应。     ,        我正在使用onbeforeunload进行类似操作，但是我的数据有效载荷非常小（一个GUID），并且我不需要任何返回值，因此很容易忘记。它的运行时间约为95％，但是不同的浏览器在onbeforeunload，onunload等方面的实现方式有所不同。 您可以弹出带有未保存数据的另一个窗口，然后在您的请求被触发后关闭该窗口，但是这里的关键元素是'pop \'-可能会被阻止。可以使用上面的本地存储答案。 当然，第一个解决方案-询问用户，然后让他们保存可能是最好的。也许他们正在关闭以防止自上次保存以来保存任何更改？