数组循环时如何为每个元素重新启动setTimeout实现逐次延时变色

核心思路 #

你遇到的第一个问题是因为for循环会瞬间把所有setTimeout全部注册，所有定时器的计时起点都是循环执行的瞬间，自然不会等待前一个结束再开始。我们可以用async/await封装定时器，实现串行等待每个任务执行完成后再处理下一个的逻辑。

实现代码 #

首先封装一个通用的延迟工具函数：

// 延迟指定毫秒数的工具函数
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))

然后改写你的changeColors函数：

const changeColors = async () => {
  // 你的目标数组，可替换为你的实际数据源
  const data = [
    {startColor:"red",event:"start",time:0.3},
    {stopColor:"blue",event:"stop",time:10},
    {startColor:"green",event:"start",time:40}
  ]

  // 遍历处理每个元素，串行执行
  for (const item of data) {
    // 先等待当前元素指定的时长，从0开始计时
    await sleep(item.time * 1000)
    // 延时结束后执行对应逻辑
    if (item.event === "start") {
      console.log("Start: ", item.event)
      setClockBackgroucol(null)
      setbackgroucol(item.startColor)
    } else if (item.event === "stop") {
      console.log("Stop: ", item.event)
      setClockBackgroucol(item.stopColor)
      setbackgroucol(null)
    }
  }

  // 所有元素处理完成后，执行清除最后一个颜色的逻辑
  console.log("所有延时任务执行完成，清除颜色")
  setClockBackgroucol(null)
  setbackgroucol(null)
}

逻辑说明 #

• 每次循环都会先await当前元素指定的时长，只有等这个延迟结束后才会进入下一次循环，下一个元素的计时才会从零开始，完全匹配你的需求
• 循环结束的位置就是所有任务都执行完成的时机，直接在这里写清除颜色的逻辑即可解决第二个问题

内容的提问来源于stack exchange，提问作者m-0-h