17370845950

setTimeout仅执行一次，需用clearTimeout清除；setInterval用于重复执行但精度低，应配合clearInterval清理；传参勿加括号，避免立即执行。

setTimeout 只执行一次，别误当循环用

很多人写 setTimeout 时以为加个递归调用就是“定时器”，其实那是自己手动模拟的循环逻辑。真正该用循环场景时，优先考虑 setInterval —— 它原生支持重复执行，且更可控。

常见错误：在回调里反复调用 setTimeout 却没保存返回值，导致无法清除；或者忘记清理，造成内存泄漏或重复触发。

• setTimeout 返回一个数字 ID，必须用它配合 clearTimeout 才能取消
• 如果回调中又调用了 setTimeout，每次都会生成新 ID，旧的不会自动失效
• 想实现“延迟后执行一次”，直接用 setTimeout；想“每隔 X 毫秒执行”，用 setInterval

setInterval 的执行时机不精确，别依赖毫秒级精度

浏览器或 Node.js 环境下，setInterval 实际执行间隔往往大于设定值，尤其在页面失焦、CPU 负载高、或 JS 主线程被阻塞时。这不是 bug，而是事件循环机制决定的。

典型现象：设了 setInterval(fn, 100)，但 fn 实际每 120~300ms 才跑一次；甚至在标签页后台运行时，浏览器会大幅降低频率（如降为 1s 一次）。

• 不要用 setInterval 做动画帧控制，改用 requestAnimationFrame
• 需要较准时间节奏（比如倒计时显示），建议用 Date.now() 计算真实流逝时间，而不是靠次数累加
• 记得用 clearInterval 清理，尤其在组件卸载、模块销毁前，否则定时器持续运行

传参容易出错：避免直接传带括号的函数调用

写 setTimeout(someFn(), 1000) 是常见错误——这会立即执行 someFn，把它的返回值传给 setTimeout，而不是延迟执行函数本身。

正确做法是传函数引用，或用箭头函数/匿名函数包裹。

• ✅ 正确：setTimeout(someFn, 1000)（无括号）
• ✅ 正确：setTimeout(() => someFn(arg), 1000)
• ✅ 正确：setTimeout(someFn, 1000, arg1, arg2)（setTimeout 支持额外参数，会透传给回调）
• ❌ 错误：setTimeout(someFn(), 1000)（立刻执行）

清除定时器不是可选项，而是必做动作

漏掉 clearTimeout 或 clearInterval 是最隐蔽的资源泄露来源之一。尤其在单页应用中，组件反复挂载/卸载，若定时器没清理，旧回调仍可能在新上下文中执行，引发 this 指向错误、状态更新到已销

关键点在于：只要不是全局长期存活的定时器，都应在生命周期结束时明确清除。

• React 中通常在 useEffect 的 cleanup 函数里调用 clearInterval
• Vue 2 在 beforeDestroy，Vue 3 在 onBeforeUnmount
• 纯 JS 场景下，确保有变量保存 ID，并在合适时机调用清除函数

最麻烦的情况是嵌套异步 + 定时器组合，比如请求未完成就切换页面，此时不仅要清定时器，还要 abort fetch 或 cancel promise。这类边界处理，往往比写定时器本身更花时间。