TypeScript如何让代码休眠等待数秒后再执行后续步骤

你实现的sleep是基于Promise的异步函数，直接调用时不会阻塞后续代码执行：JS执行到this.sleep(5000)时仅会拿到一个未完成的Promise对象，不会等待5秒计时结束，就会立刻执行下一行的递归调用，因此完全不会产生预期的等待效果，会无间隔持续执行递归。
另外你的递归调用存在上下文错误：直接写loadAPI(this.status)没有绑定当前类实例，运行时会抛出函数未定义的错误。

使用async/await语法等待异步sleep执行完成即可，需要做三处调整：

• 将loadAPI方法标记为async异步函数
• 调用sleep时增加await关键字，阻塞等待计时结束后再执行后续逻辑
• 递归调用时改为this.loadAPI()，绑定当前类实例的上下文

修复后的核心代码：

async loadAPI(status: string) {
  // ...... 你的原有业务逻辑

  if (this.result === "done") {
    // ...... 完成状态下的业务逻辑
  } else {
    // 等待sleep执行完成
    await this.sleep(5000);
    // 递归调用时必须通过this访问实例方法
    this.loadAPI(this.status);
  }
}

sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

如果你需要兼容不支持async/await的老旧运行环境，可以把递归逻辑放到sleep返回Promise的then回调中，但async/await是目前可读性最高、逻辑最清晰的实现方式，优先推荐使用。

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