setTimeout和setInterval是JavaScript里最常用的两个定时器API，但不少人对它们的理解只停留在“一个执行一次、一个重复执行”的层面，实际写代码时依然会踩进任务堆积、定时器泄漏、清除无效等坑里。这篇文章从底层执行机制讲起，把两者的区别和各自的适用场景说清楚。
一、基本语法与执行行为的本质区别
先看两个定时器的标准签名。setTimeout(fn, delay)表示延迟delay毫秒后执行一次回调，之后自动结束；setInterval(fn, delay)则表示每隔delay毫秒就触发一次回调，直到被手动清除或页面销毁。从语义上看，一个是“延时做一次”，一个是“周期性重复做”，这是最直观的差异。
// setTimeout：1秒后执行一次
var timer1 = setTimeout(function () {
console.log('我只执行一次');
}, 1000);
// setInterval：每隔1秒执行一次
var timer2 = setInterval(function () {
console.log('我会不断执行');
}, 1000);但仅仅记住这一点还不够。两个方法都会返回一个整数类型的定时器ID，这个ID是清除定时器的唯一凭证。值得注意的是，在HTML5规范之后，浏览器还支持给回调函数传递额外参数，写法上是允许的，只是兼容性场景下要谨慎使用，老项目里更稳妥的做法是通过闭包或箭头函数把参数带进去。
另一个容易被忽略的细节是：定时器本质上是宏任务。无论setTimeout还是setInterval，回调都不会精确地在设定的时刻执行，而是被放入任务队列，等主线程空闲时才被取出。如果主线程被同步代码阻塞，比如有一个耗时800毫秒的大循环在跑，那么设定的100毫秒延时实际触发时间可能远超100毫秒。这就是为什么定时器参数只应该理解为“不早于该时间执行”，而不是“恰好在该时间执行”。
二、setInterval的隐藏问题：任务堆积与漂移
setInterval最大的坑在于它不管上一次回调是否执行完毕，到点就把下一次任务塞进队列。假设定时间隔是100毫秒，而回调本身需要执行300毫秒（比如包含复杂计算或长时间同步操作），会出现什么情况？回调会连续排队执行，形成任务堆积，页面可能出现明显卡顿。
// 危险示例：回调耗时超过间隔时会堆积
setInterval(function () {
// 假设这个同步操作耗时400毫秒
var end = Date.now() + 400;
while (Date.now() < end) {}
console.log('tick', Date.now());
}, 100);此外还有时间漂移问题。setInterval的间隔计时从插入队列那一刻开始算，回调的实际执行时间、浏览器的节流策略（比如后台标签页会把定时器压缩到最少1秒一次）都会造成实际间隔与设定值偏差越来越大。对于动画、倒计时这类对时间敏感的场景，这种误差累积起来会相当明显。
业界更推荐的做法是用递归调用的setTimeout来模拟周期任务。这样下一次定时的注册发生在上一次回调执行完之后，天然避免了任务堆积，间隔也更可控：
// 递归setTimeout：上次执行完才安排下一次
function schedule() {
setTimeout(function () {
doWork(); // 无论耗时多久
schedule(); // 执行完再注册下一个定时器
}, 1000);
}
schedule();这种写法还能灵活调整间隔，比如根据实际执行耗时动态补偿，让整体节奏更接近预期，这是setInterval做不到的。
三、清除方式与常见错误
两个定时器分别对应clearTimeout和clearInterval清除。有趣的是，在现代浏览器的实现中，这两个清除方法实际上是互通的，传入对方的定时器ID也能正常清除，但为了代码可读性和规范性，强烈建议成对使用。
var t1 = setTimeout(fn, 1000); var t2 = setInterval(fn, 1000); clearTimeout(t1); // 清除setTimeout clearInterval(t2); // 清除setInterval
实际项目中最常见的错误是忘记保存返回值，或者清除时变量已经丢失。比如在组件中启动了定时器，但组件销毁时没有清理，定时器还在后台跑，不仅浪费资源，回调里如果引用了已销毁组件的状态，还会引发报错。在React或Vue中，务必在useEffect的清理函数或unmounted钩子里执行清除操作。
还有一个细节：定时器ID是数字而非对象，多次调用clear同一个ID不会报错，所以重复清除是安全的。但如果回调已经执行完毕（针对setTimeout），清除动作就没有任何意义了，这点在写条件清除逻辑时要心里有数。
四、如何选择：场景化建议
明确了机制差异之后，选型其实很清晰。setTimeout适合一次性的延迟任务：提示框延时消失、防抖处理、接口失败后的延迟重试、页面加载后的初始化动作等。setInterval适合真正的周期性轮询：简单的数据刷新、状态检查这类执行时间短且稳定的任务。
如果回调的执行时间不确定，或者需要精确控制节奏，比如动画帧同步、倒计时、轮询间隔需要根据服务器时间校正，优先选择递归setTimeout方案，必要时配合requestAnimationFrame处理动画，配合Date.now()做时间补偿处理倒计时。
最后提醒一点，页面切到后台时浏览器会对定时器做节流甚至冻结，如果你的业务依赖定时器持续计时（比如在线考试倒计时），切回前台时要主动用当前时间重新校准，而不是相信定时器累积的执行次数。理解了这些边界行为，两个定时器才能真正为你所用。
setTimeoutsetIntervaljs定时器修改时间：2026-09-06 02:02:37