数组遍历：为元素添加classList时设置延迟的问题求助

你的代码里有两个关键问题导致无法实现类的延迟添加：

1. forEach是同步循环，所有元素的类会被同时修改，没有时间间隔
2. animationDelay的字符串拼接语法错误，缺少连接符+

下面是两种实现方案，根据你的需求选择：

方案1：逐个延迟添加类（推荐，符合你“添加类时设置间隔”的需求） #

这种方式会依次给每个元素添加类，每个元素间隔固定时间触发动画：

const letters = [...document.querySelectorAll('span')]

const offerAnimation = () => {
  // 遍历每个元素，利用索引设置延迟
  letters.forEach((item, index) => {
    // 每个元素比前一个晚300ms执行（可根据需求调整这个时间）
    setTimeout(() => {
      item.classList.add('offer-animation') // 用add替代toggle，避免重复触发时移除类
      item.style.color = 'lime'
    }, index * 300)
  })
} 

offerAnimation()

方案2：同时添加类，设置动画延迟 #

如果你的动画逻辑需要同时添加类，但让动画依次执行，只需修复语法错误即可：

const letters = [...document.querySelectorAll('span')]

const offerAnimation = () => {
  let delayTime = 1

  letters.forEach(item => {
    item.classList.toggle('offer-animation')
    // 修复字符串拼接错误，这里生成0.1s、0.2s...的延迟
    item.style.animationDelay = `0.${delayTime}s`
    item.style.color = 'lime'
    
    delayTime++
  })
} 

offerAnimation()

说明：

• 方案1的核心是用setTimeout结合元素索引，给每个操作设置递进的延迟时间，实现逐个添加类的效果
• 方案2只是修复了语法错误，类会被同时添加，动画会按设置的延迟依次启动

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