Question

So supposedly starting at Firefox > 4，将窗口jQuery对象绑定到beforeunload不再起作用。

我想做的是提交一篇AJAX帖子来删除我服务器的内存缓存数据。

当我刷新唯一的打开选项卡时，我可以看到在firefox和chrome中调用beforeunload事件，并使用以下代码，如console.log消息所示，“firefox / NON-firefox delete” 。问题是我从未看到console.log消息“memcache delete”，表明我的服务器从未见过$.ajax请求。

我意识到浏览器嗅探是不好的，并且if和else语句中包含的内容之间没有区别。我只是展示了我在Firefox中尝试失败的代码。

有人有什么想法吗？

$(window).bind('beforeunload', function(){ 
  if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
    console.log('firefox delete');
     memcacheDelete();
     return null;
  } 
  else {
    console.log('NON-firefox delete');
    memcacheDelete();
    return null;
  }
});

function memcacheDelete() {
   $.ajax({
      url: "/memcache/delete", 
      type: "post",
      data:{}, 
      success:function(){
          console.log('memcache deleted');
      }//success
  }); //ajax
}

Answer 1

Ajax是异步的。

当您刷新（或关闭）浏览器时，正在调用beforeunload。这意味着只要beforeunload完成执行，页面就会刷新（或关闭）。

当你执行ajax请求时，（因为它是异步的）javascript解释器不等待ajax success事件被执行并向下移动以完成beforeunload的执行。

应该在几秒后调用

success ajax，但是当页面被刷新/关闭时你不会看到它。

旁注：

.success()方法已弃用，已替换为.done()方法

Reference

Answer 2

为了完成，这就是我所做的，感谢@Jashwant的指导：我注意到this other SO Q&A suggested the same solution。 以下async:true(false)调用中的 $.ajax：

$(window).bind('beforeunload', function(){ 
  if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
    console.log('firefox delete');
     var data={async:false};
     memcacheDelete(data);
     return null;
  } 
  else {
    console.log('NON-firefox delete');
     var data={async:true};
     memcacheDelete(data);
    return null;
  }
});

function memcacheDelete(data) {
  $.ajax({
    url: "/memcache/delete", 
    type: "post",
    data:{}, 
    async:data.async,
    success:function(){
      console.log('memcache deleted');
    }//success
  }); //ajax
}

在卸载之前将AJAX发送到服务器

2 个答案: