最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 开发技术 > web开发 >
JS中怎样清除页面中所有定时器?
PHP中文网发表于 2021-09-10 18:13 次浏览

    JS中怎样清除页面中所有定时器?在实际的项目中,清除页面中所有定时器的需求还是比较常见的,那么究竟有什么方法可以实现呢?下面我们一起来了解看看。

    如果我们在创建定时器(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来保存,所以可以直接把timerclearInterval传进去就清除掉了,但是第二个定时器我们没有保存它,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定时器实现的,但是我们并不知道储存这个轮播图的定时器的变量是什么,我们要停掉这个轮播图,就可以用刚刚的代码直接停掉所有的定时器。

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

    关于JS清除所有定时器的内容就介绍到这了,希望大家阅读完这篇文章能有所收获,想要了解更多JS清除定时器的方法,请关注群英网络其它相关文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐