12. setInterval 循环定时器与清除

setInterval 就是循环执行，每隔 N 毫秒执行一次。

核心两个：
① setInterval(fn, 毫秒)——每隔 N 毫秒执行
② clearInterval(id)——停止定时器

坑：没 clear 就一直跑、回调执行时间可能超过间隔、页面切换后台 setInterval 会被节流。

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

12.2 知识点讲解

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

// 语法：setInterval(每隔多久要干的事, 间隔多少毫秒)
// 计数器从 0 开始
let num = 0;

let loopTimer = setInterval(function () {
  // 每响一次就 +1
  num++;
  // 顺手打出来看看
  console.log("循环执行：", num);
}, 1000);

// 每 1000 毫秒（也就是 1 秒）响一下，一直响到你喊停为止

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

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

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

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

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

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

// 1. 闹钟编号必须用变量接住，不然没法取消
// 2. 好几个闹钟就各存各的变量，别合用一个
// 只响一次的叫 delayTimer
let delayTimer = setTimeout(function () {}, 3000);
// 循环响的叫 loopTimer
let loopTimer = setInterval(function () {}, 1000);
// 3. 起名见名知意：timer / loopTimer / delayTimer，一眼看懂
// 4. 页面关了、弹窗关了，记得顺手把对应的闹钟也清掉

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

本页重点