如何让setTimeout按定义顺序执行，等待前一个回调完成后再执行后续函数

首先明确默认输出顺序混乱的原因：3个setTimeout是同步注册的，会同时开始计时，计时结束后就直接执行回调，因此延时越短的回调越先执行。

如果要严格按第一个→第二个→第三个的顺序执行，核心是保证前一个定时器的回调执行完成后，再注册下一个定时器，这里提供两种常用实现方式：

方式1：回调嵌套实现 #

最直观的写法，直接把后一个定时器的注册逻辑放到前一个定时器的回调中：

setTimeout(() => {
  console.log("this is the first message");
  // 第一个回调执行完成后，才启动第二个定时器
  setTimeout(() => {
    console.log("this is the second message");
    // 第二个回调执行完成后，才启动第三个定时器
    setTimeout(() => {
      console.log("this is the third message");
    }, 1000);
  }, 3000);
}, 5000);

这种写法的缺点是如果后续要增加更多定时任务，会出现多层嵌套的回调地狱，代码可读性和可维护性都会下降。

方式2：Promise+async/await实现（推荐） #

先封装通用的延迟执行函数，再用async/await按顺序调用，逻辑清晰易扩展：

// 封装延迟执行工具，返回Promise
function delayRun(timeout, callback) {
  return new Promise((resolve) => {
    setTimeout(() => {
      callback();
      resolve();
    }, timeout);
  });
}

// 按顺序执行定时任务
async function execTasks() {
  await delayRun(5000, () => console.log("this is the first message"));
  await delayRun(3000, () => console.log("this is the second message"));
  await delayRun(1000, () => console.log("this is the third message"));
}

execTasks();

这种写法不管每个任务的延时是多少，都会严格按照await的书写顺序执行，前一个任务没有执行完成时，后一个定时器不会开始计时，完全符合需求。

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