Promise在setTimeout循环中的正确resolve调用方式

TL;DR: Promise的resolve()只会完成Promise的状态变更，但不会终止当前的循环逻辑。在循环中使用Promise时，需要确保调用resolve()后能终止循环，避免代码继续执行。

问题场景还原 #

你提到用setTimeout实现动画循环，本来设定运行指定次数后退出，但直接调用resolve()后，Promise虽然成功解析了，可循环还是停不下来——这其实是个很常见的误区。举个你可能写过的错误代码示例：

function animate(times) {
  return new Promise((resolve) => {
    let count = 0;
    function loop() {
      count++;
      // 这里是你的动画绘制逻辑
      console.log(`执行第${count}次动画`);

      if (count >= times) {
        resolve('动画完成'); // 这里调用了resolve，但循环还会继续
      }
      setTimeout(loop, 16); // 不管条件满足与否，都会触发下一次循环
    }
    loop();
  });
}

// 调用后会发现，即使count达到times，还是会继续打印日志
animate(3).then(res => console.log(res));

为什么会这样？因为resolve()只是告诉Promise“我完成了”，但它不会中断当前loop函数的执行——所以setTimeout(loop, 16)还是会被调用，循环就停不下来了。

两种有效的修复方案 #

方案一：使用if-else分支控制循环

把setTimeout放到else分支里，只有当循环未达到指定次数时，才触发下一次循环：

function animate(times) {
  return new Promise((resolve) => {
    let count = 0;
    function loop() {
      count++;
      console.log(`执行第${count}次动画`);

      if (count >= times) {
        resolve('动画完成');
      } else {
        setTimeout(loop, 16); // 仅未完成时继续循环
      }
    }
    loop();
  });
}

这样一来，当count达到指定次数时，就不会再调用setTimeout，循环自然终止。

方案二：在if分支中return resolve()

通过return语句终止当前loop函数的执行，这样后续的setTimeout就不会被调用了：

function animate(times) {
  return new Promise((resolve) => {
    let count = 0;
    function loop() {
      count++;
      console.log(`执行第${count}次动画`);

      if (count >= times) {
        return resolve('动画完成'); // return直接终止函数，跳过后续代码
      }
      setTimeout(loop, 16);
    }
    loop();
  });
}

这里的return resolve()其实是两步操作：先调用resolve()完成Promise，再通过return让函数停止执行，避免了后续的循环触发代码。

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