JavaScript setInterval 怎么用
你有没有遇到过这种情况：网页上的一个按钮，点击后要每隔1秒刷新一次数据，或者做一个倒计时的弹窗？这时候，你大概率会用到JavaScript里的一个“定时干活”工具——setInterval。它就像你手机里的“重复提醒”功能，到点就自动触发，帮你完成各种需要循环执行的网页操作。
很多新手刚接触setInterval时，总搞不清它怎么“启动”“干活”“停掉”，甚至会写出“点了一次就一直跑，关都关不掉”的bug。今天就用生活化的例子，把setInterval的用法拆解得明明白白。
第一步：搞懂setInterval的核心参数
setInterval的本质，就是“告诉浏览器，每隔多少时间，就执行一次指定的操作”。它的语法其实很简单，就像你给朋友发指令：“每10分钟提醒我倒垃圾，提醒内容是‘该倒垃圾啦’”。对应到代码里，就是两个核心部分：
- 第一部分是“要重复做的事”：可以是一个函数（比如写好的倒垃圾提醒函数），也可以是直接写要执行的代码；
- 第二部分是“间隔时间”：单位是毫秒，1000毫秒就是1秒，比如要每隔2秒执行，就写2000。
举个最常见的例子：做一个网页上的倒计时，从10数到0。我们可以写这样的代码：
`javascript
// 初始倒计时数字
let count = 10;
// 每隔1000毫秒（1秒）执行一次的操作
const timer = setInterval(function() {
console.log(倒计时：${count});
count--;
}, 1000);
`
这段代码运行后，浏览器会每隔1秒在控制台输出一次数字，从10降到9，再到8……直到0。这就是setInterval最基础的用法。
第二步：怎么让它停下来？
setInterval的“重复”是无限循环的，就像你设置的手机重复提醒如果不取消，会一直响下去。如果我们的倒计时到0就该停止，不然会输出负数，这时候就要用到clearInterval。
它的用法也很简单：只要把setInterval返回的“计时器ID”传给clearInterval就行。刚才的例子里，我们把setInterval的结果存到了timer变量里，当倒计时到0时，就用它停止循环：
`javascript
let count = 10;
const timer = setInterval(function() {
console.log(倒计时：${count});
count--;
// 当数字降到0时，停止计时器
if (count < 0) {
clearInterval(timer);
console.log('倒计时结束啦！');
}
}, 1000);
`
这样就不会出现无限输出负数的情况了。就像你倒完垃圾后，把手机的重复提醒关掉，避免它一直响。
常见的坑要避开
虽然setInterval用法简单，但新手很容易踩两个小坑：
第一个坑是“时间不准”。比如你设置的间隔是1秒，但实际运行中可能因为浏览器卡顿，或者其他任务占了资源，执行间隔会比1秒长一点。如果是要求高精度的场景（比如秒表），可以用Date对象来修正，但日常的简单动画、数据刷新，这个小误差完全够用。
第二个坑是“重复启动没清理”。比如你做了一个“开始倒计时”按钮，每次点击都启动一次setInterval，却没停止之前的，结果点一次就多一个计时器，最后会同时输出好几个倒计时。解决办法很简单：启动新的setInterval前，先把之前的旧计时器清掉。
掌握了这几步，你就能用setInterval解决大部分网页循环任务了——不管是做轮播图的自动切换，还是做表单的定时提醒，这个工具都能帮你轻松搞定。