如何实现JavaScript循环暂停直至函数执行完成后重复20次？

看起来你现在的核心需求是依次执行一个耗时1-5分钟的函数20次，每次必须等上一次函数完全执行完再启动下一次，但你尝试的普通for/do-while循环如果碰到异步函数的话，会直接一口气跑完20次，根本不会等待。我来给你几个靠谱的解决方案：

首先得明确：如果你的函数是同步执行的（比如纯CPU计算，没有异步操作），那你原来的for循环其实是有效的——因为同步代码会阻塞循环，必须等当前函数执行完才会进入下一次循环。但耗时1-5分钟的操作一般不会是同步的（不然会卡死线程/页面），所以咱们重点说异步场景的处理。

方案一：用async/await + for循环（最直观） #

这是ES2017之后支持的语法，代码可读性最高，适合大多数现代环境：

首先把你的耗时函数改成返回Promise的异步函数（如果还不是的话）：

// 模拟你的耗时函数，实际替换成你的业务逻辑
async function yourLongRunningFunction() {
  return new Promise((resolve) => {
    // 模拟1-5分钟的执行时间（单位：毫秒）
    const executionTime = Math.floor(Math.random() * 240000) + 60000;
    setTimeout(() => {
      console.log(`本次函数执行完成，耗时${(executionTime / 60000).toFixed(1)}分钟`);
      resolve();
    }, executionTime);
  });
}

然后写循环逻辑：

async function run20Times() {
  for (let i = 0; i < 20; i++) {
    console.log(`开始执行第${i + 1}次任务`);
    // 关键：用await等待当前函数执行完成
    await yourLongRunningFunction();
    console.log(`第${i + 1}次任务结束，准备下一次\n`);
  }
  console.log("所有20次任务全部执行完成！");
}

// 启动循环
run20Times();

原理：await会暂停async函数的执行，直到后面的Promise状态变为resolved（也就是函数执行完成），才会继续往下走，完美实现“等一次再一次”的需求。

方案二：递归调用（兼容旧环境） #

如果你的运行环境不支持async/await（比如老版本浏览器），可以用递归+Promise的方式：

function runRecursively(currentCount = 0) {
  // 终止条件：已经执行了20次就停止
  if (currentCount >= 20) {
    console.log("所有20次任务全部执行完成！");
    return;
  }

  console.log(`开始执行第${currentCount + 1}次任务`);
  yourLongRunningFunction().then(() => {
    console.log(`第${currentCount + 1}次任务结束，准备下一次\n`);
    // 函数执行完后，递归调用自己，次数+1
    runRecursively(currentCount + 1);
  });
}

// 启动递归
runRecursively();

原理：每次函数执行完成后，在then回调里触发下一次调用，直到达到20次，本质上是把循环拆成了一次次的异步回调。

注意事项 #

• 如果是浏览器环境：长时间的同步操作会导致页面完全卡顿，所以一定要把耗时逻辑做成异步，或者用Web Worker放在后台线程执行。
• 如果是Node.js环境：同步耗时操作会阻塞整个事件循环，影响其他任务处理，同样建议用异步API。

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