如何重复执行Promise链？React个人练手项目异步问题求助

嘿，我明白你的困扰了！你的Promise链只能跑一次，用setInterval裹着没效果，核心原因是Promise一旦被resolved就进入完成状态了——你定义的promise变量是个已经完成的Promise实例，setInterval反复调用它，只会重复触发已经完成的Promise的后续回调，不会重新执行整个异步流程（也就是那些setTimeout不会再触发啦）。

下面给你两种靠谱的实现方式，都能让你的呼吸文本切换流程重复执行指定次数：

方案一：递归函数控制执行次数 #

先把你的异步流程封装成一个返回Promise的函数，然后用递归的方式，每次执行完就调用自己，直到达到指定次数：

// 封装单次呼吸周期的函数
const runBreathCycle = (props) => {
  return new Promise((resolve) => {
    // 等待3秒后进入呼气阶段
    setTimeout(() => {
      resolve();
    }, 3000);
  })
  .then(() => {
    props.changeBreathText('Exhalation');
    // 等待4秒后切换回吸气，同时标记当前周期完成
    return new Promise((resolve) => {
      setTimeout(() => {
        props.changeBreathText('Inhale');
        resolve();
      }, 4000);
    });
  });
};

// 递归重复执行的函数
const repeatBreathCycles = async (props, repeatTimes) => {
  // 次数耗尽就停止
  if (repeatTimes <= 0) return;
  
  // 等待当前周期完成
  await runBreathCycle(props);
  // 递归调用，次数减一
  repeatBreathCycles(props, repeatTimes - 1);
};

// 调用示例：让它重复执行5次
repeatBreathCycles(props, 5);

方案二：async/await + for循环（可读性更高） #

用async/await把异步代码写成同步风格，配合for循环直接控制次数，逻辑更直观：

// 单次呼吸周期的async函数
const runBreathCycle = async (props) => {
  // 等待3秒
  await new Promise(resolve => setTimeout(resolve, 3000));
  // 切换到呼气文本
  props.changeBreathText('Exhalation');
  // 再等待4秒
  await new Promise(resolve => setTimeout(resolve, 4000));
  // 切换回吸气文本
  props.changeBreathText('Inhale');
};

// 重复执行的函数
const repeatBreathCycles = async (props, repeatTimes) => {
  for (let i = 0; i < repeatTimes; i++) {
    // 每次循环都等待当前周期完成再进行下一次
    await runBreathCycle(props);
  }
};

// 调用示例：重复执行3次
repeatBreathCycles(props, 3);

这两种方案都能保证每次呼吸周期是顺序执行的，不会出现多个异步操作同时触发的问题，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Dr.Bear