js清除所有定时器（包括未知定时器）

素颜马尾好姑娘i 2023-01-12 01:55 319阅读 0赞

我们有时会有清除页面中所有定时器的需求  
如果我们在创建定时器(`setInterval`)的时候用一个变量保存了它，那么清除这个定时器很简单，直接清除(`clearInterval`)就好了  
例如：

let timer = setInterval(function () { 
        console.log('timer');
    }, 1000);
    
    clearInterval(timer);

但有时创建的定时器并没有用变量保存，这是我们就无法直接清除它了  
例如：

let timer = setInterval(function () { 
        console.log('timer');
    }, 1000);
    setInterval(function () { 
        console.log('timer');
    }, 1000);
    clearInterval(timer);
    clearInterval(/* ??? */); // 操蛋

第一个定时器我们有用一个变量`timer`来保存，所以可以直接把`timer`给`clearInterval`传进去就清除掉了  
但是第二个定时器我们没有保存它，`clearInterval`的时候不知道要传什么，这就很操蛋了

那么怎么解决这个问题呢？  
我们首先来找一下规律：

for (let i = 0; i < 10000; i++) { 
        let t = setInterval(function () {  }, 1000);
        console.log(t);
    }

运行结果：  
![sy][]

显然易得：  
`setInterval`的返回值是一个代表定时器的数值型，而且这个数值还是按照定时器创建的先后顺序从1开始递增的  
那么我们清除页面中所有定时器的需求就不难实现了  
那么比如现在有这么多个定时器：

let t = setInterval(function () {  }, 1000);
    let r = Math.random() * 100;
    for (let i = 0; i < r; i++) { 
        setInterval(function () {  }, 1000);
    }

要全部清除的话就要用一个循环把1到最后一个创建的定时器所对应的数依次的用`clearInterval`给清除掉。但是现在有一堆的定时器，我们并不知道现在具体有多少定时器，所以也不知到最后一个创建的定时器所对应的数是多少。那么首先我们可以暴力一点

for (let i = 1; i < 100000; i++) { 
        clearInterval(i);
    }

我直接找一个很大的数比如100000，一般一个页面里应该不会有100000多个定时器，一般定时器都在1,100000这个范围里，所以这个方法肯定是能实现我们的需求的。  
不过还是不太好，毕竟有点太暴力了。那么我们就需要求出当前最后一个创建的定时器所对应的数n是多少，我们知道定时器对应的数是从1开始依次递增的，那么我们只要再创建一个定时器并且用一个变量end储存起来，这个数end就是n+1，这样我们就求出n了，然后就可以从1循环到n了，哦，记得还有把刚刚创建的第n+1个定时器给清除掉，所以循环是从1到end。

那么代码如下：

let end = setInterval(function () {  }, 10000);
    for (let i = 1; i <= end; i++) { 
        clearInterval(i);
    }

这样我们就完美的实现了清除页面中所有定时器的需求

那么我们来试一下效果，拿[腾讯视频][Link 1]为例：  
![tx1][]

腾讯视频的首页一上来有一个轮播图，轮播图这种东西一般多是用`setInterval`定时器实现的，但是我们并不知道储存这个轮播图的定时器的变量是什么，我们要停掉这个轮播图，就可以用刚刚的代码直接停掉所有的定时器。  
![tx2][]

在控制台中执行完刚刚的代码后，发现轮播图确实停了。

妙啊！

ヾ(≧∪≦\*)ノ〃

[sy]: /images/20221119/cb1cb11175214f46ab6dff2f09da0007.png
[Link 1]: https://v.qq.com/index.html
[tx1]: /images/20221119/ee9a270a3421457090b4dc1964993ef7.png
[tx2]: /images/20221119/775761013f094f1db789bbba6a2bd81b.png