如何修复jQuery AJAX调用阻止用户离开页面的问题？

我完全懂你的困扰——这个加载缓慢的相似商品AJAX请求居然能卡住页面导航，用户想离开都走不了，体验简直糟透了。其实核心原因是浏览器默认会等待未完成的HTTP请求结束后，才允许页面跳转，咱们可以通过主动终止请求来解决这个问题。

下面是具体的解决方案，一步步来：

1. 保存AJAX请求的引用 #

首先，你需要把jQuery AJAX返回的jqXHR对象存起来，这样后面才能主动终止它。先看原来的AJAX调用：

$.ajax({
  url: "/api/similar-products",
  method: "GET",
  success: function(data) {
    $("#similar-products").append(data);
  }
});

我们修改一下，把请求对象存入变量：

// 在合适的作用域下保存请求对象
let similarProductsReq;

// 发起请求并赋值
similarProductsReq = $.ajax({
  url: "/api/similar-products",
  method: "GET",
  async: true, // 明确设置异步（jQuery默认就是true，但写出来更稳妥）
  success: function(data) {
    $("#similar-products").append(data);
  },
  error: function(xhr, status) {
    // 忽略"abort"类型的错误，因为这是我们主动终止的请求
    if (status !== "abort") {
      console.log("相似商品加载失败:", xhr);
    }
  }
});

2. 在页面卸载时终止请求 #

接下来，监听页面的beforeunload事件——这个事件会在用户点击链接、刷新页面、关闭标签页时触发。在事件回调里检查请求是否还在进行，如果是，就调用abort()终止它：

$(window).on("beforeunload", function() {
  // 检查请求是否存在且未完成（readyState !== 4 表示请求还在处理中）
  if (similarProductsReq && similarProductsReq.readyState !== 4) {
    similarProductsReq.abort();
  }
});

3. 额外优化：设置请求超时 #

为了进一步避免请求长时间占用资源，你可以给AJAX请求加个超时时间，比如5秒——就算用户没导航离开，请求也会在超时后自动终止，不会一直挂着：

similarProductsReq = $.ajax({
  url: "/api/similar-products",
  method: "GET",
  async: true,
  timeout: 5000, // 5秒后自动超时
  success: function(data) {
    $("#similar-products").append(data);
  },
  error: function(xhr, status) {
    if (status !== "abort" && status !== "timeout") {
      console.log("相似商品加载失败:", xhr);
    }
  }
});

这样处理之后，用户想离开页面时，浏览器会立即终止那个缓慢的AJAX请求，不会再强制用户等待；同时超时设置也能避免请求无限制挂起，完美解决你的问题。

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