← 返回目录

12. setInterval 循环定时器与清除

setInterval 是"循环闹钟"：每隔固定时间响一次，不手动停就一直响。它有个脾气：不等待上一次回调执行完，长时间跑会有时间偏差——要精准就用"嵌套 setTimeout"。

12.1 互动演示（开始 / 停止 / 自动停）

12.2 知识点讲解

① 基本语法：和 setTimeout 只差一个"反复"

// 语法：setInterval(每隔多久要干的事, 间隔多少毫秒)
let num = 0; // 计数器从 0 开始
let loopTimer = setInterval( => {
  num++; // 每响一次就 +1
  console.log("循环执行：", num); // 顺手打出来看看
}, 1000);
// 每 1000 毫秒（也就是 1 秒）响一下，一直响到你喊停为止

1000ms 是"至少间隔"：如果回调里干活超过 1 秒，下一轮也不会等你，可能"叠车"。所以精准场景推荐嵌套 setTimeout（上一轮跑完再定下一轮）。

② 清除：clearInterval + "数到 5 自动停"写法

// 想让它停下：clearInterval(那个定时器的编号)
clearInterval(loopTimer); // 把之前存的编号传进去

// 经典写法：让它自己数够了自己关
let count = 0;
let t = setInterval( => {
  count++; // 每响一次 +1
  console.log(count); // 打出来
  if (count >= 5) {
    clearInterval(t); // 数到 5 了，回调里反手把自己关了
  }
}, 1000);

"回调里 clear 自己"是自动停止的标准姿势（倒计时归零、抽奖步数耗尽都靠它）。

③ 定时器 ID 保存规范（4 条硬性要求）

// 1. 闹钟编号必须用变量接住，不然没法取消
// 2. 好几个闹钟就各存各的变量，别合用一个
let delayTimer = setTimeout( => {}, 3000); // 只响一次的叫 delayTimer
let loopTimer = setInterval( => {}, 1000); // 循环响的叫 loopTimer

// 3. 起名见名知意：timer / loopTimer / delayTimer，一眼看懂
// 4. 页面关了、弹窗关了，记得顺手把对应的闹钟也清掉

clearInterval 传 setTimeout 的 ID 无效——两套 ID 不通用，别混用（作业踩坑点）。