递归setTimeout结合Promise时回调提前执行的问题咨询

你的问题出在loop函数没有返回Promise，导致调用loop后，JavaScript不会等待它的异步循环执行完毕，就直接执行了console.log("The End")。Promise完全适用于你的场景，只要调整代码让异步操作的顺序可控即可。

修改方案1：让loop返回Promise链 #

function awaitTimeout(delay) {
  return new Promise(resolve => setTimeout(resolve, delay));
}

function loop(msg, i) {
  // 循环终止时返回已完成的Promise
  if (i === msg.length) return Promise.resolve();
  
  return awaitTimeout(200)
    .then(() => {
      console.log(msg.substring(0, i));
      // 递归调用时返回loop的Promise，延续异步链
      return loop(msg, i + 1);
    });
}

awaitTimeout(3000)
  .then(() => {
    // 等待loop的异步循环完成
    return loop("Hello World, this is a Loop.", 1);
  })
  .then(() => {
    console.log("The End");
  })
  .catch(err => console.error(err));

修改方案2：用async/await简化代码（更易读） #

function awaitTimeout(delay) {
  return new Promise(resolve => setTimeout(resolve, delay));
}

async function loop(msg, i) {
  while (i < msg.length) {
    await awaitTimeout(200);
    console.log(msg.substring(0, i));
    i++;
  }
}

// 用async函数包裹，直接等待所有异步操作
(async () => {
  await awaitTimeout(3000);
  await loop("Hello World, this is a Loop.", 1);
  console.log("The End");
})();

核心逻辑说明 #

• 让loop返回Promise，这样外部就能通过await或.then()等待整个异步循环完成。
• 递归或循环中的每一步异步操作都要被正确等待，确保执行顺序符合预期。

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