自动保存与"卸"在注销事件,并调用Ajax:为了行动导致的问题 [英] Autosave with "unload" event and ajax call on logout : order of actions is causing an issue

查看:108
本文介绍了自动保存与"卸"在注销事件,并调用Ajax:为了行动导致的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是一个在线编辑器自动保存功能。

I'm using a AutoSave feature on an online editor.

当一个用户离开该页面,我送一个AJAX(与卸载 beforeunload 事件检测)请求(异步= false)来保存数据。

When an user leaves the page (detected with unload or beforeunload event), I'm sending a AJAX request (async = false) to save the data.

我在Firefox等有时会在Chrome中的一个问题,因为事件的意甲正在发生的事情:

I have a problem in Firefox et sometimes in Chrome because that serie of events is happening :

  • 事件发射
  • 在发送请求
  • 页改变,并且用户被断开
  • 请求服务器分析=>问题!
  • 将浏览器接收到的请求响应

当然,因为用户已经断开无法处理保存的要求。

Of course since the user has been disconnected the "save" request can't be handled.

有没有一种方法,与所有浏览器兼容,等待AJAX​​调用的响应,之前的页面实际上更改?

Is there a way, compatible with all browsers, to wait for the response of the AJAX call, before the page actually changes ?

推荐答案

ORI的答案是正确的,完整的。

ori's answer is correct and complete.

但是,从你的情况来看,你可以使用一种解决方法。

But judging from your case you could use a workaround.

有两个JavaScript功能,你可能感兴趣的: localStorage的和sessionStorage(这是除了第二个同样被清零浏览器关闭,所以你probabli会选择第一个)

There are two JavaScript features you might be interested in: localStorage and sessionStorage (it's the same except the second one is cleared on browser close, so you probabli will choose the first)

我们的想法是将数据保存到localStorage的一些元数据,如果更改已保存说明。如果用户离开该页面,但去到另一个页面在你的服务,甚至在稍后返回 - 你可以用一些资料,这不是由于页面卸载保存再次发送数据。

The idea is to save data to localStorage with some metadata stating if changes were saved. If the user leaves the page but goes to another page in your service, or even returns later - you can send the data again with some information that it was not saved due to page unload.

理念code证明:

$(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与卸载和它似乎工作大部分的时间,但我还没有在负载和速度较慢的网络上进行了测试。

I have been successfully using JSONP with unload and it seemed to work most of the times, but I haven't tested it under load and on slow network.

这篇关于自动保存与"卸"在注销事件,并调用Ajax:为了行动导致的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆