如何在JavaScript中正确实现setTimeout的异步顺序执行？

原代码如下：

const delayTime = (time) =>
  setTimeout(() => {
    console.log("run after:", time);
  }, time);

const runTime = async () => {
  await delayTime(1000);
  await delayTime(900);
};

runTime();

实际运行结果：

run after: 900
run after: 1000

期望运行结果：

run after: 1000
run after: 900

问题原因 #

delayTime当前返回的是setTimeout的定时器ID，并不是Promise对象。await只能等待Promise完成，所以这里的两个await不会起到顺序等待的作用，两个定时器会同时启动，900ms的定时器先到期，自然先输出结果。

修改方案 #

把delayTime改成返回Promise的函数，让await能够正确等待定时器执行完成后，再启动下一个定时器：

const delayTime = (time) =>
  new Promise(resolve => {
    setTimeout(() => {
      console.log("run after:", time);
      resolve();
    }, time);
  });

const runTime = async () => {
  await delayTime(1000);
  await delayTime(900);
};

runTime();

这样修改后，第一个定时器等待1000ms执行输出后，才会启动第二个900ms的定时器，最终输出顺序就符合预期了。

内容的提问来源于stack exchange，提问作者Luân Nguyễn Thế