JavaScript 如何清除定时器
在网页上做轮播图自动切换、实时刷新的倒计时，或是动画效果时，都离不开定时器——它就像网页里的“定时闹钟”，到点就触发任务。但如果闹钟没及时关掉，就会一直响个不停，不仅占内存，还可能让网页变卡。要避免这种情况，就得学会“关掉定时器”，也就是清除定时器。
先搞懂：网页里的两种“定时闹钟”
JavaScript里常用的定时器有两种，对应两种清除方式，先把它们分清楚就不会搞错。
一种是“循环闹钟”：设定一个间隔时间，每到时间就重复做事，比如每3秒换一次轮播图，代码是setInterval(要做的事, 间隔毫秒数)；另一种是“单次闹钟”：到设定时间只做一次事，比如10秒后弹出提醒，代码是setTimeout(要做的事, 延迟毫秒数)。
这两个函数都会返回一个数字，就像给每个定时器发了个“专属编号”——这个编号就是清除它的关键，得先存起来，才能精准找到要关的那个闹钟。比如做轮播图时，先把编号存到变量里：const timerId = setInterval(switchSlide, 3000)，这个timerId就是对应定时器的“身份证”。
清除循环定时器：用 clearInterval
如果是setInterval开的循环闹钟，就得用clearInterval来关。举个生活化的例子：你设了每天早上7点的闹钟（对应setInterval，每24小时响一次），要关掉它就得用“取消每日闹钟”的指令。
比如轮播图切换，当用户点击“停止轮播”按钮时，就需要清除之前存好的定时器编号：clearInterval(timerId)。注意这里不能写错成clearTimeout，不然关的不是循环闹钟，可能白忙活。
举个完整的小例子：
`js
// 开循环闹钟，每1秒在控制台打印一次“网页加载中”
const myTimer = setInterval(() => console.log('网页加载中'), 1000);
// 3秒后关掉这个循环闹钟，就不会再打印了
setTimeout(() => clearInterval(myTimer), 3000);
`
这段代码里，3秒后调用clearInterval，循环打印的任务就会停止，要是没这行代码，它会一直打印，占着浏览器的内存。
清除单次定时器：用 clearTimeout
如果是setTimeout设的单次闹钟，就得用clearTimeout来取消——好比你设了10分钟后的外卖提醒，要是提前决定不吃了，就可以取消这个提醒。
有些场景会用到这个：比如用户在输入框打字，你设了“输入结束1秒后搜索”的单次定时器，要是用户在这1秒内又打了一个字，就可以把之前的定时器取消，重新设一个1秒后搜索的。
代码例子：
`html
<!-- 输入框 -->
<input type="text" id="searchInput" placeholder="输入关键词搜索">
<script>
let searchTimer; // 存单次定时器编号
const input = document.getElementById('searchInput');
input.addEventListener('input', () => {
// 每次打字，先取消之前的定时器，避免重复搜索
clearTimeout(searchTimer);
// 再设新的定时器，1秒后执行搜索
searchTimer = setTimeout(() => console.log('执行搜索'), 1000);
});
</script>
`
这个例子里，用户每敲一个字，就会把上一次的searchTimer取消，只有最后一次打字后等1秒，才会执行搜索，不会出现打一个字搜一次的情况，这就是清除单次定时器的实用场景。
容易踩的小坑：别拿错编号
很多新手会犯的错：开定时器后没存编号，或者清除时用错了编号。比如同时开了两个定时器，要关第一个却给了第二个的编号，就会关错。
还有个常见误区：以为页面关闭时定时器会自动消失，其实不会——如果定时器里还有任务，比如循环请求接口，页面关了它还可能在后台跑，占资源。所以页面卸载时，最好统一清除所有定时器：
`js
window.addEventListener('beforeunload', () => {
clearInterval(timerId);
clearTimeout(searchTimer);
});
`
这样就不会留下“幽灵定时器”，让网页更干净顺畅。