setInterval定时器停止后怎么再次启用

问题遇到的现象和发生背景

我在网上查了一下,说再次启用,只需要再次调用即可,但是我调用了为啥没效果

整体代码
<template>
  <!-- 此页面为图片轮播页面 -->
  <div id="kuang_jia" data-v-app>
    <div id="img">
      <div id="imgContainer" ref="divImage">
        <!--   标签中的ref的作用和js中的document.getElementById作用一样.都是获取标签属性     -->
        <img v-for="(item, index) in imgList.array" :key="index" alt="" v-bind:src="item">
        <!--   设置图片数组循环,依次获取所有图片   -->
      </div>
      <div class="zuo_you">
        <span class="zuo" @click="zuo">
          &lt;
        </span>
        <span class="you" @click="you">
            &gt;
        </span>
      </div>
      <!--  箭头div必须放在图片div的后面,否则不显示  -->
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import one from '../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg'
import tow from '../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg'
import three from '../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg'
import four from '../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg'
import five from '../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg'
import six from '../../image/9477156de6d94c49c505a9dfce8e8c17.jpg'
import seven from '../../image/c52be335098658931847fa0ecbcf7d03.jpeg'
import eight from '../../image/d86d80e8573ab91914a6e9ad5217c785.jpg'
import nine from '../../image/e305fca1a381bda8482d8b3296da61f6.jpg'
import ten from '../../image/fa983053c19cf3c7b27491507799e02e.jpeg'
// 导入所有图片

const imgList = reactive({ array: [] })
imgList.array = [one, tow, three, four, five, six, seven, eight, nine, ten]
// 将图片放入数组,以供循环
const divImage = ref()
// 获取标签属性
const countChu = ref()
// 设置滚动初始值
const width = ref()

const xunHuan1 = setInterval(() => {
  width.value = (-10) * countChu.value
  divImage.value.style.transform = 'translateX(' + width.value + '%)'
  // 设置每次轮播的距离百分比
  divImage.value.style.transitionDuration = '1s'
  // 设置每次轮播过程的时间
  countChu.value++
  // 设置次数的增长
  if (countChu.value >= 5) {
    clearInterval(xunHuan1)
    // 当次数大于等于5时,停止滚动
  }
}, 3000)
// 设置滚动,由于水平原因无法实现轮播,故设置为当页面最右边的图片为最后一张时,停止滚动

const zuo = () => {
  if (countChu.value <= 1) {
    return
  }
  width.value += 10
  countChu.value--
  divImage.value.style.transform = 'translateX(' + width.value + '%)'
}
// 设置左侧箭头点击事件

const you = () => {
  if (countChu.value >= 5) {
    return
  }
  width.value -= 10
  countChu.value++
  divImage.value.style.transform = 'translateX(' + width.value + '%)'
}
// 设置右侧箭头点击事件

watch(countChu.value, () => {
  xunHuan1()
})
// 当次数小于5时,继续启用定时器

onMounted(() => {
  countChu.value = 1
})
// 挂载执行
</script>

<style scoped>
#kuang_jia {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 300px;
  margin: 20px;
  border: azure 3px solid;
}

#img {
  width: 1230px;
  height: 340px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#img div {
  width: 2460px;
  height: 340px;
  position: relative;
  background-color: bisque;
}

.zuo_you {
  position: absolute !important;
  width: 1200px !important;
  background-color: transparent !important;
  top: 0;
  left: 0;
}

/* 设置顶层显示,并且上下居中 */
.zuo, .you {
  font-size: 50px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: aqua;
}

.zuo {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}

.you {
  position: absolute !important;
  top: 50%;
  right: -3%;
  transform: translateY(-50%);
}

/*  扩展:!important(Css属性) */
/* 用法: https://www.runoob.com/css/css-important.html */
</style>
调用代码

img

效果预览

img


现在是当图片预览到最后一张时停止滚动,我想要实现的是当点击左右按钮时,会切换图片,当最后一张图片不是图片库中的最后一张时,继续滚动

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7676525
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：【小程序】setInterval定时执行与停止定时执行踩坑点
  • 除此之外, 这篇博客: 定时器的详解应用到背后的原理解析中的 setInterval重复定时器可能存在的问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 当使用setInterval时，仅当没有该定时器的任何其他代码实例时，才将定时器添加到队列中。这确保了定时器代码添加到队列中的最小时间间隔为指定时间间隔。

    有时候会出现以下问题：

    • 某些间隔会被跳过
    • 多个定时的代码执行之间的间隔可能会比预期小

    举例： 某个onclick事件使用serInterval设置了一个200ms间隔的重复定时器，如果时间处理程序花了300多ms时间完成，同时定时器也花了差不多的时间，就会同时出现跳过间隔且连续运行定时器代码的情况。如图：
    在这里插入图片描述
    解决方法： 可以尝试使用 链式setTimeout()

    //链式使用
setTimeout(function () {
    setTimeout(arguments.callee, interval)
}, interval)

问题点:定时器重启无效
分析:
①有没有可能定时器调用的函数是因为图片到了最后一张时，停止滚动,需要回到起始。
解决办法:
出现情况①，判断图片是最后一张，则属性初始化，重头执行.