如何优化嵌套setTimeout实现的按钮动画，改用时长递增的setInterval

优化方案 #

实现思路 #

将所有动画任务和对应的间隔时长统一用数组维护，通过动态调整setInterval的间隔实现逐次递增的执行节奏，全程仅用单个定时器变量管理动画流程，避免冗余的嵌套setTimeout，效果和原有实现完全一致。

优化后代码 #

cta.addEventListener("mouseover", () => {
  // 按执行顺序定义所有动画任务
  const tasks = [
    () => {
      audio.play()
      audio.volume = .06
      imgs[0].style.transform = "translate(0, 0)"
    },
    () => imgs[2].style.transform = "translate(0, 0)",
    () => imgs[1].style.transform = "translate(0, 0)",
    () => imgs[5].style.transform = "translate(0, 0)",
    () => imgs[3].style.transform = "translate(0, 0)",
    () => imgs[4].style.transform = "translate(0, 0)"
  ]
  // 对应每个任务执行前的等待间隔，顺序和tasks数组一一对应
  const delays = [100, 150, 50, 50, 50, 300]
  let taskIndex = 0
  let animateInterval = null

  const runTask = () => {
    tasks[taskIndex]()
    taskIndex++
    // 所有任务执行完毕后清除定时器终止流程
    if (taskIndex >= tasks.length) {
      clearInterval(animateInterval)
      return
    }
    // 调整下一次执行的间隔时长
    clearInterval(animateInterval)
    animateInterval = setInterval(runTask, delays[taskIndex])
  }

  // 启动定时器
  animateInterval = setInterval(runTask, delays[taskIndex])
})

优化说明 #

• 动画任务和延迟参数统一配置，后续调整动画顺序、新增/删除动画、修改间隔仅需修改数组配置，无需改动逻辑代码
• 没有嵌套回调，代码可读性和可维护性大幅提升
• 所有任务执行完成后自动销毁定时器，无内存泄漏风险

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