必须用 javascript 实现标签页定时自动切换，核心是用 setinterval 调用手动切换函数；需保存定时器 id、监听 visibilitychange 暂停后台切换、用户交互后延迟恢复，并综合判断页面可见性、焦点、媒体播放等状态避免骚扰。
不能只靠 CSS 或纯 HTML 实现标签页的定时自动切换；必须用 JavaScript 控制状态轮转，否则无法响应时间、暂停、用户交互等真实需求。
用 setInterval 驱动 tab 切换的核心逻辑
自动切换本质是「按固定间隔触发一次手动切换动作」，所以先确保你已有可工作的手动切换函数（比如 switchTab('tab2')），再用定时器调它。
- 别在
setInterval里直接操作 DOM 样式——应复用已封装好的切换函数，保持逻辑一致 - 间隔时间建议 ≥ 3000ms：太短会干扰用户阅读，且 Safari 对小于 1s 的
setInterval有节流 - 必须保存定时器 ID（如
let autoSwitchTimer），否则无法暂停或销毁 - 切换前检查页面是否可见：
document.hidden为true时应clearInterval，避免切到后台还瞎跳
visibilitychange 事件必须监听
用户切走标签页或最小化浏览器时，自动切换不仅浪费资源，还可能在切回瞬间跳过当前页——这是最常被忽略的体验断点。
- 在初始化自动切换后，立即绑定：
document.addEventListener('visibilitychange', () => { if (document.hidden) clearInterval(autoSwitchTimer); else startAutoSwitch(); }) - 不要依赖
blur/focus：它们不覆盖所有不可见场景（比如 macOS 的 Mission Control） - 某些 kiosk 模式（如投屏）需额外检测
document.hasFocus()，但注意该方法在 iframe 中可能返回false即使页面可见
如何安全暂停/恢复自动切换
用户点击任一 tab 时，应立即暂停计时，并在几秒后（比如 5 秒）自动恢复——否则用户刚点完就跳走，体验极差。
- 在每个 tab 的 click handler 开头加：
clearInterval(autoSwitchTimer) - 用
setTimeout延迟重启：autoSwitchTimer = setInterval(switchNextTab, 3000); - 避免重复启动：重启前先检查
autoSwitchTimer是否为null或undefined - 如果用了 Vue/React，别把定时器挂组件实例上——服务端渲染时
setInterval会报错；改用useEffect或mounted+beforeUnmount清理
真正的难点不在“怎么切”，而在“什么时候不该切”：页面不可见、用户正在输入、当前 tab 含视频/音频、焦点在表单控件内……这些状态都得显式判断，漏掉任何一个，自动切换就会变成骚扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
