11

So supposedly starting at Firefox > 4, binding the window jQuery object to beforeunload doesn't work anymore.

What'd I'd like to do is submit an AJAX post to delete my server's memcache data.

When I refresh the only open tab, I can see that the beforeunload event is called in both firefox and chrome with the following code as evidenced by the console.log message, "firefox/NON-firefox delete". The problem is that I never see the console.log message "memcache delete" indicating that my server never saw the $.ajax request.

I realize it is bad to do browser sniffing and that there is no difference between what's included in the if and else statements. I'm merely showing code for what I've tried unsuccessfully in Firefox.

Anyone have any ideas?

$(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
}
4

2 に答える 2

11

Ajax は非同期です。

ブラウザを更新 (または閉じる) すると、beforeunloadが呼び出されます。そして、beforeunloadの実行が終了するとすぐに、ページが更新 (または閉じられます) されることを意味します。

ajax リクエストを実行すると、(非同期であるため) javascript インタープリターは ajax イベントが実行されるのを待たずsuccess、 の実行を終了して下に移動しbeforeunloadます。

successof ajax は数秒後に呼び出されるはずですが、ページが更新/閉じられているため表示されません。

サイドノート：

.success()メソッドは廃止され、.done()メソッドに置き換えられました

参照

于 2013-02-18T05:25:29.650 に答える
8

完了のために、@ Jashwantのガイダンスに感謝します。この他のSOQ＆Aが同じ解決策を提案していることに気づきました。 キーは、以下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
}
于 2013-02-18T06:14:41.737 に答える