JS：如何基于Promise实现每3秒间隔的循环定时执行？

你示例代码的核心问题是：在普通同步for循环的循环体里直接写return，函数执行到第一次迭代碰到return就会直接退出整个函数，根本不会走完4次循环，实际效果只会触发1次3秒定时器，完全达不到循环执行4次的目标。
要实现“每3秒触发一次、总共执行4次”的串行定时逻辑，核心是把每一步的延时Promise按执行顺序串成链路，不能在同步循环里直接裸return Promise打断流程。

1. 链式Promise拼接（兼容所有Promise使用场景） #

不需要额外语法，靠Promise自身的then方法把每一步的执行顺序串起来：

// 用一个初始的已完成Promise作为链路起点
let taskChain = Promise.resolve();

for (let x = 0; x < 4; x++) {
  // 把每次的延时任务追加到链路末尾，等待上一个任务完成后再执行
  taskChain = taskChain.then(() => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("timeout", x);
        resolve();
      }, 3000)
    });
  })
}

// 绑定全部任务执行完成的回调
taskChain.then(() => {
  console.log("4次定时任务全部执行完毕");
})

这种写法的实际效果是：从代码执行开始计时，第3秒打第一次timeout，第6秒打第二次，第9秒打第三次，第12秒打第四次，完全符合间隔3秒一次的要求，不会出现4个定时器同时触发的问题。

2. async/await 语法糖（代码更简洁直观） #

如果支持ES2017及以上语法，可以把循环逻辑放到async函数中，通过await等待每一步的延时完成，根本不需要手动拼接Promise链：

// 封装通用的延时工具函数
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function startTimer() {
  for (let x = 0; x < 4; x++) {
    // 等待3秒后再执行下一行代码，再进入下一次循环
    await wait(3000);
    console.log("timeout", x);
  }
  console.log("全部任务执行完成");
}

startTimer();

• 不要直接在for循环里批量创建setTimeout而不做串行逻辑，这种写法会让4个定时器的计时从代码执行时刻就开始，3秒后4个console会同时触发，根本达不到间隔3秒一次的效果。
• 如果是在异步函数的循环里写顶层return，会直接跳出整个循环逻辑，所以循环内部的return只能用在被then/await包裹的Promise回调里，不能直接写在循环体的顶层。

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