jQuery AJAX回调异常：success与error输出为何同步变化？

我可能忽略了一些简单的问题。我编写了一段jQuery AJAX请求代码：

M_DATA = some data;
$.ajax({
  url: "some url..." + M_DATA.id,
  data: M_DATA,
  type: "post",
  timeout: 5000,
  success: function(response, textStatus, xhr) {
    console.log("AJAX result: " + response + "; status: " + textStatus);
    //alert("AJAX result: " + response + "; status: " + textStatus);
  },
  error: function(XMLHttpRequest, textStatus, error) {
    alert("AJAX error: " + textStatus + "; " + error);
  }
});

当我设置success回调输出到控制台时，error回调也会输出到控制台，尽管我设置error用alert弹窗；当我把success改成alert时，error也会跟着用alert。我想要的是success输出到控制台，error弹出提示框，不知道哪里出错了？我尝试过交换success里的console.log和alert，error的输出方式也会随之改变。

这种情况大概率是你误写了变量或者回调函数引用错误，比如可能把success和error的回调指向了同一个函数，或者在代码其他地方重写了jQuery的ajax回调默认行为。

以下是几个具体排查和解决方向：

• 检查是否在代码其他地方修改了$.ajaxSettings，比如全局设置了success或error回调，导致所有AJAX请求的回调被统一覆盖。
• 确认M_DATA或其他变量没有意外污染回调逻辑，比如是否存在变量名冲突，把alert或console.log方法重新赋值了。
• 查看浏览器控制台的语法错误提示，有时候代码报错会导致回调执行异常，出现不符合预期的行为。
• 尝试给回调函数单独命名，避免匿名函数可能出现的引用问题，示例代码如下：

function handleSuccess(response, textStatus, xhr) {
  console.log("AJAX result: " + response + "; status: " + textStatus);
}

function handleError(XMLHttpRequest, textStatus, error) {
  alert("AJAX error: " + textStatus + "; " + error);
}

$.ajax({
  url: "some url..." + M_DATA.id,
  data: M_DATA,
  type: "post",
  timeout: 5000,
  success: handleSuccess,
  error: handleError
});

这种写法更直观，也更容易排查是否有外部代码修改了这两个回调函数。

另外，可以在error回调中额外添加控制台输出，验证回调是否正常触发：

error: function(XMLHttpRequest, textStatus, error) {
  console.log("已进入error回调");
  alert("AJAX error: " + textStatus + "; " + error);
}

如果控制台输出了这句话但弹窗不符合预期，那说明alert或console.log可能被全局重写了，比如某些调试工具或第三方脚本修改了这些原生方法。

内容的提问来源于Stack Exchange，提问作者Carl Beech