$.blockUI jQuery 插件块后退按钮 android / phonegap答案

【问题标题】：$.blockUI jQuery plugin blocks back button android / phonegap$.blockUI jQuery 插件块后退按钮 android / phonegap
【发布时间】：2014-03-07 14:27:47
【问题描述】：

我正在使用 blockUI jQuery 插件进行 AJAX 调用：

//start the plugin
App.utilities.Loading();

$.ajax(url, {
  type: "POST",
  contentType: 'application/json',
  data: JSON.stringify({
    "textcontent": content
  }),
  success: function (data) {
    $.mobile.navigate('discussion.html');
    $.unblockUI();
  }
});

有时加载时间超过三秒，如果用户按下返回按钮，调用 $.unblockUI(); 后会触发返回事件。有没有办法在插件开启期间返回并取消 Ajax 调用？

我可以得到block UI的状态：

var isUIBlocked = $('.ui-widget-overlay:visible').length > 0;

有什么想法吗？

【问题讨论】：

标签： javascript android jquery ajax cordova

【解决方案1】：

你可以试试下面的代码

//start the plugin
App.utilities.Loading();

//assign the ajax call to a xhr object
var xhr = $.ajax(url, {
    type: "POST",
    contentType: 'application/json',
    data: JSON.stringify({
        "textcontent": content
    }),
    success: function (data) {
        $.mobile.navigate('discussion.html');
        $.unblockUI();
    }
});

//when back button is being clicked
window.onbeforeunload = function (e) {

    xhr.abort();  //abort the above ajax call

    var isUIBlocked = $('.ui-widget-overlay:visible').length > 0;
    if(isUIBlocked) {
        $.unblockUI();
    }
}

进一步阅读 jquery.ajax 函数的 jqXHR 对象：http://api.jquery.com/jQuery.ajax/#jqXHR

【讨论】：