最直接方法是用 JavaScript 的 setInterval，传入函数引用和毫秒间隔（如 3000 表示 3 秒）；必须保存返回的定时器 ID 以便清除，避免重复启动，并用 Date.now() 校准时间防止偏移。
用 setInterval 控制秒级定时任务最直接
HTML 本身没有“间隔设置”能力，真正起作用的是 JavaScript 的 setInterval。它接受两个必填参数：要执行的函数和以毫秒为单位的间隔时间。想实现“每 N 秒执行一次”，就把 N * 1000 传进去。
常见错误是把字符串函数（如 "console.log(1)"）当第一个参数传入，这会触发隐式 eval，既不安全又难调试；正确做法是传函数引用或箭头函数。
-
setInterval(() => console.log("tick"), 3000)—— 每 3 秒打印一次 - 避免
setInterval("console.log(1)", 1000)—— 已被现代浏览器警告弃用 - 返回值是定时器 ID（数字），必须保存好，否则无法后续清除
清除定时器前务必保存 intervalId
没保存 setInterval 返回的 ID，就等于扔掉了刹车——页面切走、组件卸载、用户点击停止按钮时全都没法停。尤其在 React/Vue 等框架中，容易因闭包或状态丢失导致 ID 不可访问。
典型场景：一个倒计时组件，用户点“暂停”时调用 clearInterval(intervalId)，但若 intervalId 是局部变量或未绑定到响应式状态，就会失效。
- 声明时立刻赋值：
const intervalId = setInterval(...) - 在类组件中存为实例属性：
this.intervalId = setInterval(...) - React 函数组件推荐用
useRef存储：const intervalRef = useRef(null)，赋值写intervalRef.current = setInterval(...)
注意 setTimeout 和 setInterval 的精度差异
浏览器对定时器有最小延迟限制（通常 ≥ 4ms），且当标签页非激活时，setInterval 可能被节流甚至暂停（尤其是后台标签页）。这不是 bug，而是浏览器省电策略。
如果需要严格按秒推进（比如倒计时显示），不要依赖多次 setInterval 累加，而应记录起始时间，每次用 Date.now() 计算已过秒数：
const start = Date.now();
setInterval(() => {
const elapsedSec = Math.floor((Date.now() - start) / 1000);
console.log(`${elapsedSec}s passed`);
}, 1000);
- 这样即使某次回调延迟了 200ms，下一次仍基于真实时间校准，不会越拖越偏
- 而纯
setInterval(..., 1000)在后台运行时可能变成每 10 秒才触发一次
避免重复启动多个 setInterval
用户反复点击“开始”按钮却没先清除旧定时器，会导致多个同逻辑定时器并发运行，界面疯狂刷新、请求发重、CPU 升高——这种 bug 很隐蔽，日志里只看到“为什么一秒 log 了 5 次？”
- 每次启动前检查并清理：
if (intervalId) clearInterval(intervalId) - React 中可在
useEffect清理函数里统一处理，避免遗漏 - 控制台快速验证：执行
getEventListeners(window)（Chrome）看不到残留定时器监听，说明清理干净了
实际用起来，关键不是“怎么设间隔”，而是“怎么管住它”——存 ID、清旧例、靠时间戳校准、防重复启。这些点漏掉任意一个，都可能让“每秒一次”变成“每秒五次”或“三分钟不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
