扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下javascript如何清除所有定时器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,成都网站建设、网站建设,塑造企业网络形象打造互联网企业效应。
在JS中,可利用for循环和clearInterval()函数来清除所有定时器,语法“end=setInterval(function(){},10000);for(i=1;i<=end;i++){clearInterval(i);}”。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
我们有时会有清除页面中所有定时器的需求
如果我们在创建定时器(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); }
运行结果:
显然易得: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); }
这样我们就完美的实现了清除页面中所有定时器的需求
腾讯视频的首页一上来有一个轮播图,轮播图这种东西一般多是用setInterval
定时器实现的,但是我们并不知道储存这个轮播图的定时器的变量是什么,我们要停掉这个轮播图,就可以用刚刚的代码直接停掉所有的定时器。
在控制台中执行完刚刚的代码后,发现轮播图确实停了。
以上是“javascript如何清除所有定时器”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流