如何用setInterval同时发起AJAX请求？现有代码存在阻塞问题

问题分析 #

原代码存在两个核心问题：

• promise2 中的 setInterval 会导致该 Promise 永远无法 resolve，定时器持续运行会让 Promise.all 一直处于等待状态。
• 虽然两个 AJAX 理论上会同时发起，但 promise2 的 Promise 状态始终无法改变，导致后续逻辑无法正常执行。

修正后的代码 #

function mixexport_exe(opn) {
  mixdownactive = 1;
  getid('tool_mix_area').innerHTML = 'loading...';

  // 第一个AJAX请求
  const promise1 = new Promise((resolve, reject) => {
    $.ajax({
      url: 'includes/ffmpeg_export.php?callFunction=mixexport_exe&version_id=<?=$version_dta[id] ?>&version_creaid=<?=$version_dta[version_id] ?>&exeoption=' + opn,
      success: function(data) {
        getid('tool_mix_area').innerHTML = data;
        resolve(data);
      },
      error: function(error) {
        reject(error);
      }
    });
  });

  // 第二个定时轮询的AJAX请求
  const promise2 = new Promise((resolve, reject) => {
    // 设置定时器，每500ms执行一次请求
    const intervalId = setInterval(() => {
      $.ajax({
        url: 'includes/ajax.php?callFunction=getrenderstatus',
        success: function(data) {
          console.log(data);
        },
        error: function(error) {
          // 请求出错时立即清除定时器并终止Promise
          clearInterval(intervalId);
          reject(error);
        }
      });
    }, 500);

    // 第一个请求完成后，清除定时器并结束轮询Promise
    promise1.finally(() => {
      clearInterval(intervalId);
      resolve('轮询已停止');
    });
  });

  // 监听两个Promise的完成状态
  Promise.all([promise1, promise2])
    .then((values) => {
      console.log('执行完成:', values);
    })
    .catch((error) => {
      console.error('发生错误:', error);
    });
}

关键修改说明 #

• 同时执行AJAX：两个 Promise 在函数调用后立即初始化，对应的 AJAX 请求会同时发起，无需等待彼此完成。
• 修复Promise状态：通过监听 promise1 的 finally 事件，在第一个请求结束（无论成功或失败）时清除轮询定时器，并让 promise2 正常 resolve，确保 Promise.all 能进入后续处理逻辑。
• 错误终止机制：当轮询的AJAX请求出错时，立即清除定时器并 reject，避免无意义的持续请求。

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