如果用户在页面完成加载之前离开页面，则 jQuery ajaxError() 处理程序将触发

Question

我们使用 jQuery 的全局 ajaxError() 处理程序来提醒用户任何 AJAX 失败:

$(document).ajaxError(function() {  
    $("There was a network or server error. Please try again later.").dialog({  
        title: "Error",  
        modal: true,  
        resizable: false,  
        buttons: { 'Ok': function() { (this).dialog("close"); } }  
    });  
});  

不幸的是，如果用户在完成加载之前离开页面，这个全局错误处理程序也会触发。以下是重现错误的步骤:

1. 用户访问页面 A，其中包含通过 AJAX 加载的元素。
2. 开始加载页面 A 上的 AJAX 元素。
3. 在页面 A 上的 AJAX 元素完成加载之前，用户点击链接访问页面 B。
4. 在浏览器重定向到页面 B 之前，会短暂显示错误对话框。

当错误是由用户访问新页面直接引起时，我们知道如何让 ajaxError() 不触发吗？

更新:在将评论中的建议纳入之后，现在这是我的代码:

// I added a 3 second delay to our error dialog, enough time
// for the user to leave for a new page:
$(document).ajaxError(function() {
    setTimeout(my_error_handler, 3000);
});

// Warn user before leaving page if AJAX is still loading.
// Not sure I'll keep this:
$(document).ajaxStart(function() {
    ajaxing = true;
});

$(document).ajaxStop(function() {
    ajaxing = false;
});

window.onbeforeunload = function() {
    if (typeof(ajaxing) != 'undefined' && ajaxing) {
        return "Page elements are still loading!";
    }
};

Answer 1

是的，如果用户导航到另一个页面，xhr 将中止，这实际上是一次不成功的通信。解决方案是为 onbeforeunload 事件注册一个监听器，并在那里解除绑定(bind) ajaxError ，基本上是说:用户即将离开页面，所以我不希望被告知可能出现的 ajax 错误。

不过，有些网站(例如 GMail)会采取相反的方式:如果您尝试离开该页面，而仍有一些待处理的 ajax 请求，它会提示您有一些进程仍在运行，并让用户决定是留在网站上直到请求完成，还是继续浏览并离开。