是否存在AJAX请求发送后成功返回前可用于轮询的回调？

当然有这类回调啦！完全能匹配你说的场景——在AJAX请求发出去但还没收到服务器响应的空档里，启动进度表的轮询逻辑。下面分几种常用的AJAX实现方式，给你具体讲怎么落地：

1. 原生XMLHttpRequest #

原生XHR有个非常贴合需求的loadstart事件，它会在请求已经发送出去的瞬间触发，刚好是你要的节点。另外还有progress事件会在请求过程中周期性触发，但如果是普通非流式响应的话，loadstart就足够用了。

示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/your-api-endpoint', true);

// 请求发送后、响应返回前的回调逻辑
xhr.addEventListener('loadstart', () => {
  console.log("请求已发出，开始轮询进度表");
  // 启动每秒一次的轮询
  const pollInterval = setInterval(() => {
    // 发请求拿最新进度
    fetch('/get-progress')
      .then(res => res.json())
      .then(data => {
        // 更新页面上的进度表
        updateProgressTable(data.percentage);
        // 主请求完成后，立刻停掉轮询
        if (window.isMainRequestDone) {
          clearInterval(pollInterval);
        }
      });
  }, 1000);
});

// 主请求成功后的逻辑（你的长耗时循环）
xhr.addEventListener('load', () => {
  window.isMainRequestDone = true;
  longRunningLoop();
});

xhr.send();

2. jQuery AJAX #

jQuery的$.ajax()本身没有直接暴露“发送后”的回调，但可以通过xhr选项自定义原生XHR对象，然后绑定loadstart事件，跟上面的逻辑一致：

示例代码：

$.ajax({
  url: '/your-api-endpoint',
  method: 'GET',
  xhr: function() {
    const xhr = new XMLHttpRequest();
    // 绑定发送后的回调
    xhr.addEventListener('loadstart', () => {
      console.log("请求已发出，启动进度轮询");
      const pollInterval = setInterval(() => {
        $.get('/get-progress')
          .done(data => {
            updateProgressTable(data.percentage);
            if (window.mainRequestCompleted) {
              clearInterval(pollInterval);
            }
          });
      }, 1000);
    });
    return xhr;
  },
  success: function(response) {
    window.mainRequestCompleted = true;
    // 你的长耗时循环逻辑
    longRunningLoop();
  }
});

3. Fetch API #

Fetch没有直接提供“发送后”的事件，但因为fetch()调用后请求就立刻发送了，所以你可以在调用fetch()的同时启动轮询，逻辑上完全等价于“发送后”的回调：

示例代码：

// 先启动轮询
let pollInterval = setInterval(() => {
  fetch('/get-progress')
    .then(res => res.json())
    .then(data => {
      updateProgressTable(data.percentage);
      // 主请求完成就停掉轮询
      if (window.fetchRequestDone) {
        clearInterval(pollInterval);
      }
    });
}, 1000);

// 再发送主请求
fetch('/your-api-endpoint')
  .then(res => res.json())
  .then(response => {
    window.fetchRequestDone = true;
    // 你的长耗时循环
    longRunningLoop();
  })
  .catch(err => {
    // 请求失败也要停掉轮询哦
    window.fetchRequestDone = true;
    clearInterval(pollInterval);
    console.error("请求出错：", err);
  });

针对你的场景的小建议 #

• 一定要记得在主请求完成（不管成功还是失败）时清除轮询定时器，不然会一直跑，浪费资源还可能导致内存泄漏
• 如果你的长耗时循环是在前端执行的，尽量别让它阻塞主线程——可以把循环拆成异步小任务（比如用setTimeout或者requestIdleCallback），不然页面会卡顿，轮询请求也可能发不出去
• 如果后端能配合的话，用**Server-Sent Events(SSE)**或者WebSocket主动推送进度会比轮询更高效，不过这得后端改代码支持

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