Vue项目中如何按固定间隔自动依次触发链接点击事件

错误原因 #

你原来的写法在遍历每个li元素时都单独创建了一个3秒触发的定时器，所有定时器几乎同时到期，所以会同时触发所有li的点击事件，不符合顺序轮播的要求。

正确实现方案 #

只需要创建一个全局定时器，每次按顺序计算下一个要激活的索引即可，不需要遍历所有元素创建定时器：

1. 先在data中新增变量存储定时器实例 #

data() {
  return {
    slideIndex: 0,
    slides: [/* 你的原有轮播数据 */],
    autoPlayTimer: null // 存储自动播放定时器
  }
}

2. mounted钩子中启动自动播放 #

mounted() {
  this.autoPlayTimer = setInterval(() => {
    // 计算下一个索引，到达最后一个元素后自动回到第一个，实现循环轮播
    const nextIndex = (this.slideIndex + 1) % this.slides.length
    // 直接修改slideIndex即可，和点击li的执行效果完全一致
    this.slideIndex = nextIndex
    // 若你需要真实触发DOM的点击事件（比如点击事件有其他额外逻辑），可以替换为下面的代码
    // this.$refs.slide[nextIndex]?.click()
  }, 3000)
}

3. 组件销毁时清除定时器，避免内存泄漏 #

Vue2版本：

beforeDestroy() {
  if (this.autoPlayTimer) {
    clearInterval(this.autoPlayTimer)
  }
}

Vue3版本：

beforeUnmount() {
  if (this.autoPlayTimer) {
    clearInterval(this.autoPlayTimer)
  }
}

可选优化 #

如果需要实现鼠标hover到轮播项上暂停自动播放、鼠标移出后恢复的效果，可以给li元素绑定对应的事件：

<li 
  v-for="(slide, index) in slides" 
  :key="index" 
  :class="slideIndex === index ? 'active' : ''" 
  @click="slideIndex = index" 
  @mouseenter="clearInterval(autoPlayTimer)"
  @mouseleave="重新执行mounted里的定时器启动逻辑即可"
  ref="slide"
>
 {{ slide.title }}
</li>

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