JavaScript中最常用定时器是setTimeout和setInterval:前者延后执行一次,需clearTimeout取消;后者按间隔重复执行,需clearInterval清除;任务耗时波动大时推荐用setTimeout递归实现稳定间隔。

JavaScript里最常用的定时器就两个:setTimeout 和 setInterval。核心区别很简单:一个只跑一次,一个反复跑。
setTimeout 是“延后执行一次”
它在指定毫秒数之后,调用函数或执行代码,仅此一次。适合做延迟触发类操作。
- 比如用户输入停顿 300ms 后再发起搜索(防抖)
- 比如弹出提示框 2 秒后自动消失
- 比如模拟接口响应延迟:setTimeout(() => console.log('数据到了'), 1500)
- 必须用 clearTimeout 来取消,否则它自己执行完就结束,不占资源
setInterval 是“每隔固定时间重复执行”
它会按设定间隔不断调用函数,直到你主动调用 clearInterval 或页面卸载。
- 比如每 5 秒拉一次服务器最新数据
- 比如实现倒计时、秒表、轮播图切换
- 注意:如果任务执行时间 > 设定间隔,后续调用不会被跳过,可能堆积——例如设了 1000ms 但每次执行要 1200ms,就会出现“连发”现象
- 必须用 clearInterval 清除,漏掉会导致内存泄漏或意外持续运行
想稳定重复执行?推荐 setTimeout 递归写法
setInterval 在任务耗时波动大时容易节奏不准。更可控的做法是用 setTimeout 自调用:
立即学习“Java免费学习笔记(深入)”;
- 每次任务执行完,再设下一次定时:“做完再等,不抢时间”
- 示例:function tick() { console.log('执行'); setTimeout(tick, 1000); } tick();
- 这样能保证两次执行之间严格间隔 1000ms,不受任务本身耗时影响
清除定时器必须配对使用
返回的 ID 只能用对应的清除方法:
- setTimeout 返回的 ID → 只能用 clearTimeout
- setInterval 返回的 ID → 只能用 clearInterval
- 混用无效,比如用 clearTimeout 去清 setInterval 的 ID,什么也不会发生
基本上就这些。选哪个,关键看你要“只干一回”还是“一直干下去”。










