今天跟大家聊聊我最近踩的一个小坑，关于 `setInterval` 的，也算是个实践记录。
事情是这样的，前段时间我接个小项目，里面有个需求是做一个轮播图。这种东西嘛so easy！ 我立马就想到用 `setInterval` 定时切换图片。
一开始写的代码大概是这样：
var index = 0; var images = ['*', '*', '*']; var imageElement = *('myImage'); var intervalId = setInterval(function() {
index = (index + 1) % *;
* = images[index];
}, 3000);
看起来没啥问题，对？ 每隔3秒切换一张图片。 跑起来也确实正常，轮播图欢快地转起来。
但是！ 问题来。 后来我发现，这个轮播图所在的页面，用户是可以离开的。 比如，用户点个按钮，跳转到另一个页面。 或者，用户关掉浏览器标签页。
这时候，`setInterval` 还在后台默默地跑着！ 虽然页面都关，但是定时器还在占用着资源，这不是白白浪费性能嘛 而且如果用户又重新打开轮播图页面，就会出现两个 `setInterval` 同时跑，轮播图速度直接翻倍，鬼畜得不行。
这可不行！ 我得想办法在页面离开的时候，把这个 `setInterval` 给停掉。
于是我就开始查资料，然后知道 `clearInterval` 这个东西。 它可以用来停止 `setInterval` 创建的定时器。
OK，思路有，接下来就是怎么用。 我需要在页面卸载的时候，调用 `clearInterval`。 查一下，可以用 `*` 事件来监听页面卸载。
于是我修改代码：
var index = 0;
index = (index + 1) % *;
* = images[index];
}, 3000);
* = function() {
clearInterval(intervalId);
加一段 `*`， 在页面卸载的时候，调用 `clearInterval`， 把 `intervalId` 传进去， 这样就能停止定时器。
搞定！ 我兴冲冲地跑一下， 果然， 页面离开的时候， `setInterval` 停止， 世界清净。
但是， 还没完！
后来 我又发现一个新的问题。 有些浏览器， 比如 Chrome， 会忽略 `*` 里的 `clearInterval` 调用。 也就是说， 即使你写这段代码， `setInterval` 还是会继续跑。
What？！ 这可真是坑爹！
没办法， 只能继续查资料。 后来我发现， 可以用 `*` 事件来替代 `*`。 `*` 事件在页面完全卸载之后触发， 不会被浏览器忽略。
于是 我又修改代码：
index = (index + 1) % *;
* = images[index];
}, 3000);
* = function() {
clearInterval(intervalId);
把 `*` 改成 `*`。
这下，终于彻底解决问题！ 无论在什么浏览器里， 页面离开的时候， `setInterval` 都会被乖乖地停止。
停止 `setInterval` 的关键是：
- 1. 使用 `clearInterval(intervalId)` 来停止定时器。
- 2. 使用 `*` 事件来监听页面卸载。
这回踩坑经历告诉我， 写代码不能想 要考虑到各种情况， 特别是兼容性问题。 `setInterval` 虽 但是也要记得及时停止， 不然就会变成内存泄漏的罪魁祸首。 希望我的经历能帮到大家， 避免踩同样的坑。