setTimeout执行一次延迟任务,setInterval按固定间隔重复执行;前者适用于防抖、延迟提示,后者用于轮询、倒计时;两者均需手动清除定时器ID以防内存泄漏,且精度受JS单线程限制。

在 JavaScript 中,setTimeout 和 setInterval 都是用来延迟或重复执行代码的定时器函数,但它们的核心行为和适用场景完全不同。
setTimeout:只执行一次的延迟任务
setTimeout 用于在指定的毫秒数后,执行一次回调函数。它适合“等一会儿再做某事”的场景,比如延迟提示、防抖、页面加载后初始化等。
- 语法:
setTimeout(callback, delay, ...args) -
delay是毫秒数(如1000表示 1 秒),最小值通常为 4ms(浏览器限制) - 返回一个唯一的定时器 ID,可用于后续取消:
clearTimeout(id) - 注意:即使设置为 0,也不会立即执行,而是放入宏任务队列,等待当前同步代码执行完后再执行
setInterval:按固定间隔重复执行
setInterval 会每隔指定毫秒数就调用一次回调函数,直到被手动清除。适用于轮询、倒计时显示、心跳检测等周期性任务。
- 语法:
setInterval(callback, interval, ...args) - 同样返回定时器 ID,需用
clearInterval(id)主动停止,否则会持续运行,造成内存或性能问题 - 实际间隔可能略大于设定值,因为 JS 是单线程,如果前一次回调未执行完,下一次会被推迟(不累积)
- 避免在回调中做耗时操作,否则容易导致“定时不准”甚至卡顿
关键区别总结
最本质的区别在于执行次数和生命周期管理:
立即学习“Java免费学习笔记(深入)”;
- 执行次数:setTimeout 执行一次;setInterval 默认无限次,直到被清除
- 资源管理:两者都必须手动清理(尤其 setInterval 容易被遗忘),否则影响性能和内存
-
精度与可靠性:两者都不保证绝对精确;setInterval 更容易因执行阻塞而“漂移”,而 setTimeout 可通过递归调用实现更可控的重复逻辑(如
setTimeout(() => { doWork(); setTimeout(arguments.callee, 1000); }, 1000)) - 常见误用:把 setInterval 当作“每秒更新一次时间”,却忘记清除;或在 setTimeout 回调里写死逻辑,没考虑 this 或变量闭包问题
简单实用建议
写定时器时记住这几个要点:
- 总是保存返回的 ID,并在不需要时及时清除(组件卸载、页面跳转前尤需注意)
- 优先考虑用
setTimeout递归代替setInterval,控制更灵活、不易失控 - 避免在定时器回调中直接修改 DOM 过多,可结合
requestAnimationFrame做动画类更新 - 调试时可用
console.time()/console.timeEnd()测量回调实际耗时,判断是否影响定时精度











