JavaScript 定时器的学习笔记

2026-08-06 · 阅读 3 分钟

让代码"过一会儿再执行"或者"每隔一段时间执行一次"，用的就是 setTimeout 和 setInterval。

基本用法

// 2 秒后执行一次
const timer = setTimeout(function () {
  console.log('时间到');
}, 2000);

// 每 2 秒执行一次
const loop = setInterval(function () {
  console.log('滴答');
}, 2000);

// 不想继续了要记得清掉，不然会一直跑
clearTimeout(timer);
clearInterval(loop);

我踩过的坑

坑一：时间单位是毫秒。 我想延迟 2 秒，写了个 2，结果几乎没有延迟。要写 2000。

坑二：setInterval 会越积越多。 有一次我重复启动了两次 setInterval，画面速度变成了两倍。后来学乖了，启动前先 clearInterval 一次，或者用一个变量记住"是否已经在跑"。

坑三：时间不准。 定时器说好 100 毫秒，实际可能因为页面繁忙而延迟，不能拿它当精确时钟用。

和 requestAnimationFrame 的分工

做画面动画的时候，我一开始用 setInterval 每几十毫秒画一次，画面不顺滑。后来学到动画应该用 requestAnimationFrame，它跟着屏幕刷新节奏走，后台标签页还会自动暂停。我的分工现在是：

动画、画画 → requestAnimationFrame
倒计时、隔几秒刷新数据这种"不画面的节奏" → setInterval
延迟一下再做事（比如提示几秒后消失）→ setTimeout

小结

定时器简单但细节不少，尤其记得清理。变色圆环练习的暂停/继续，本质上就是停掉和重启动画循环。