interval 应设为大于动画时长且适配场景的值，如商品主图4000–5000ms、banner广告2500ms；需配合cleartimeout防重复触发，优先用settimeout链式调用对齐渲染节奏。
interval 参数怎么设才不翻车
绝大多数轮播图库和手写实现都靠 interval 控制自动切换节奏，单位毫秒，值越小切得越快。但直接填个 2000 很可能出问题——不是太快就是卡顿，甚至在移动端完全不可用。
-
interval: 0或false表示禁用自动播放，不是设成1或-1 - Bootstrap 5 优先读取
data-bs-interval属性，JS 初始化时传的interval可能被忽略 - Swiper 要配
autoplay: { delay: 3000 }，不是interval: 3000 - 手写
setInterval时，必须在切换前先clearInterval(this.timer)，否则旧定时器残留，点几次按钮后图片突然跳回第一张
3000 是默认值，但别无脑抄
3 秒（3000）是常见起点，但实际要按内容密度和用户场景调：商品主图建议 4000–5000，Banner 广告可压到 2500，而信息流卡片类轮播低于 2000 就容易误操作。
- 移动端手指悬停难触发
pauseOnHover，interval不宜低于2500 - 如果启用了淡入淡出或滑动动画，
interval必须大于动画时长（比如transition: opacity 0.4s），否则下一张会“挤进来”，视觉抽搐 - 用户手动切换后，有些库会重置计时器，有些则继续倒数剩余时间——查清你用的库行为，别假设它会重来
为什么 setTimeout 链式调用比 setInterval 更稳
用 setInterval 简单，但一旦切换逻辑变慢（比如 DOM 更新卡顿、图片没加载完），定时器仍准时触发，导致状态错乱；setTimeout 在每次动画/更新完成后才设下一次，天然对齐渲染节奏。
- 手写时推荐：
this.timer = setTimeout(() => this.next(), this.interval) - 每次
next()开头加clearTimeout(this.timer)，避免重复设定时器 - 用户点击按钮或拖拽时，立刻
clearTimeout，防止松手后还切一张
移动端 touch 操作会干扰 interval 计时
触摸滑动过程中，interval 计时器不会自动暂停——除非你显式处理。更麻烦的是，快速连滑两下，touchend 触发晚于定时器回调，导致 currentIndex 错位甚至负数。
- 必须在
touchstart时clearTimeout(this.timer) -
touchend后根据是否完成切换，决定是否立即恢复定时器，还是等动画结束再设 - 别依赖
clientX差值判断方向——手指斜划时clientY偏移大，容易误判为上下滚动，应取Math.abs(dx) > Math.abs(dy)再处理
interval 不是孤立参数，它和 transition 时长、用户交互响应、图片加载延迟都咬合在一起。调参前先确认：你的轮播是纯展示，还是承载关键操作入口？后者建议拉长间隔，留足反应时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
