setInterval 函数用法与常见坑

setInterval 是 JavaScript 里定时执行代码的函数，每隔指定毫秒数调用一次回调。和 setTimeout（只执行一次）不同，setInterval 会持续执行，直到 clearInterval 清除。

一、基本语法

const timer = setInterval(callback, delay, ...args);

• callback：要执行的函数。
• delay：间隔毫秒数。
• ...args：传给 callback 的参数。
• 返回值：定时器 ID，用于 clearInterval。

二、基本示例

let count = 0;
const timer = setInterval(() => {
  count++;
  console.log(count);
  if (count >= 5) clearInterval(timer);
}, 1000);

三、常见坑

1. this 指向问题

setInterval 的回调里 this 默认指向 window（非严格模式）或 undefined（严格模式），不是调用者。用箭头函数或 bind 解决。

2. 定时器泄漏

组件销毁时忘记 clearInterval，导致内存泄漏和重复执行。React/Vue 中要在 unmount 时清理。

3. delay 不精确

setInterval 不保证精确间隔，如果回调执行时间超过 delay，下一次调用会紧接上一次，间隔被压缩。

4. 递归 setInterval

在回调里再次 setInterval 会造成定时器嵌套，指数增长。应使用 setTimeout 递归代替。

四、替代方案

需要精确计时或异步操作时，用 setTimeout 递归更可靠：

function tick() {
  doWork().then(() => setTimeout(tick, 1000));
}
tick();