断开连接后jQuery Ajax无法触发？长轮询恢复延迟问题求助

这个问题我之前帮别人排查过好几次，核心原因大概率是未清理挂起的旧AJAX请求导致的请求堆积，咱们一步步拆解：

为什么会出现这种情况？ #

• 断网时，你发起的AJAX请求并没有立刻触发error（或者只是触发了网络层面的临时错误），实际上这些请求会被浏览器挂起在连接队列中，持续尝试重连。
• 你每5秒发起一次重试，相当于不断往队列里新增请求，但旧的挂起请求并没有被主动终止，导致请求队列越堆越长。
• 当网络恢复后，浏览器会按队列顺序处理所有挂起的旧请求——这些旧请求可能因为超时、后端逻辑延迟等原因，需要花费大量时间才能完成，你的success回调必须等所有旧请求都处理完毕，才会轮到最新的重试请求，所以才会出现“等数分钟才触发”的情况。
• 你看到的function aborted，大概率是浏览器在回收过期连接时主动终止了旧请求，或者你的重试逻辑无意中触发了请求终止。

怎么解决？ #

核心思路是：每次发起新的轮询请求前，主动终止上一次未完成的请求，避免请求堆积。下面是具体的实现示例（以jQuery为例）：

// 维护一个全局变量存储当前的AJAX请求实例
let currentLongPollXhr = null;

function startLongPoll() {
  // 第一步：终止上一次未完成的请求
  if (currentLongPollXhr && currentLongPollXhr.readyState !== 4) {
    currentLongPollXhr.abort();
    currentLongPollXhr = null;
    console.log('主动终止旧的挂起请求');
  }

  // 第二步：发起新的长轮询请求
  currentLongPollXhr = $.ajax({
    url: '/your/long-poll-endpoint',
    type: 'GET',
    async: true,
    timeout: 30000, // 给请求加超时，避免无限挂起
    success: function(response) {
      // 处理成功逻辑
      console.log('轮询成功:', response);
      // 成功后立即发起下一轮轮询
      startLongPoll();
    },
    error: function(xhr, status, error) {
      console.log('轮询出错:', status);
      // 区分主动终止和真实错误：如果是主动abort，不触发重试
      if (status !== 'abort') {
        // 5秒后重试
        setTimeout(startLongPoll, 5000);
      }
      // 清空当前请求实例
      currentLongPollXhr = null;
    }
  });
}

// 启动长轮询
startLongPoll();

关键细节说明： #

• 用全局变量currentLongPollXhr追踪当前的请求实例，每次发起新请求前检查并终止旧请求，从根源上避免请求堆积。
• 给请求设置timeout，防止请求在网络不稳定时无限挂起，减少队列积压的概率。
• 在error回调里判断status是否为abort，避免主动终止旧请求时触发不必要的重试逻辑。

这样修改后，网络恢复时只会有最新的请求在运行，success回调会立即触发，不会再出现延迟的情况。

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