Vue3常见的一些防抖操作

 setup (props) {
    var curIndex = ref(0)
    var timeId
    // 定时器函数
    function startTime () {
      clearTimeout(timeId)
      timeId = setInterval(() => {
        curIndex.value++
        if (curIndex.value >= props.sliders.length) {
          curIndex.value = 0
        }
        console.log(props.sliders.length, curIndex.value)
      }, 2000)
    }
    startTime()
    //鼠标移入
    const onStop = (index) => {
      clearTimeout(timeId)
      timeId = setTimeout(() => {
        curIndex.value = index
        clearInterval(timeId)
      }, 500)
    }
    // 鼠标移出
    const setTiut = () => {
      startTime()
    }
    return { curIndex, timeId, onStop, setTiut }
  }

}
      
      

1.先利用startTime()先定义一个自动循环定时器，然后掉用这个startTime这个函数

2.再定义一个移出事件，并且定义一个setTimeOut利用防抖机制

3.再到这两个函数中开始的时候把这个setTimeOut清除

这里注意一定要清除，不然就会一直加速

4.最后 完成功能