setTimeout与setInterval使用详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《setTimeout和setInterval使用教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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 指向错误、状态更新到已销毁组件、甚至报 Cannot read property 'xxx' of null。

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

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

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

到这里，我们也就讲完了《setTimeout与setInterval使用详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！