页面加载时Ajax正常执行，未完成时触发操作抛出空错误

问题根源 #

当Ajax请求还在进行时跳转页面，原页面的DOM已经被销毁，但请求的success/error回调仍会触发，这时候回调里操作的loader或相关DOM元素已经不存在，就会抛出空引用错误。

解决方法 #

方法1：页面卸载时中止未完成的Ajax请求

先把Ajax请求实例保存下来，在页面即将卸载时调用abort()终止请求，这样后续回调就不会执行了。

// 保存Ajax请求实例
let ajaxRequest;

$(document).ready(function() {
    ajaxRequest = $.ajax({
        type: 'POST',
        url: url,
        async:true,
        data: sampledata,
        beforeSend: function () {
            loader.show();
        },
        success: function (data) {
            loader.remove();
            Display(data);
        },
        error: function (xml, status, error) {
           // 中止请求时会触发error，这里判断状态避免弹出不必要的提示
           if(status !== 'abort') {
               alert(error);
           }
        }
    });
});

// 页面卸载前中止未完成的请求
$(window).on('beforeunload', function() {
    if(ajaxRequest && ajaxRequest.readyState !== 4) {
        ajaxRequest.abort();
    }
});

方法2：回调里先检查元素是否存在

在success回调执行操作前，先确认要操作的DOM元素还存在，再执行后续代码：

$.ajax({
    type: 'POST',
    url: url,
    async:true,
    data: sampledata,
    beforeSend: function () {
        loader.show();
    },
    success: function (data) {
        // 先检查loader对应的DOM元素是否存在
        if($(loader.selector).length > 0) {
            loader.remove();
        }
        // 检查Display方法依赖的容器是否存在
        if($('#display-target').length > 0) {
            Display(data);
        }
    },
    error: function (xml, status, error) {
       alert(error );
    }
});

优先推荐第一种方法，直接终止不必要的请求，既能避免报错，也能节省服务器和浏览器资源。

内容的提问来源于stack exchange，提问作者luppy