0

0

javascript怎么清除所有定时器

青灯夜游

青灯夜游

发布时间:2021-09-08 16:17:26

|

17664人浏览过

|

来源于php中文网

原创

在JS中,可利用for循环和clearInterval()函数来清除所有定时器,语法“end=setInterval(function(){},10000);for(i=1;i

javascript怎么清除所有定时器

本教程操作环境: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来保存,所以可以直接把timerclearInterval传进去就清除掉了
但是第二个定时器我们没有保存它,clearInterval的时候不知道要传什么,这就很操蛋了

立即学习Java免费学习笔记(深入)”;

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

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。

Audo Studio
Audo Studio

AI音频清洗工具(噪音消除、声音平衡、音量调节)

下载

那么代码如下:

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

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

那么我们来试一下效果,拿腾讯视频为例:

tx1

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

tx2

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

妙啊!

【推荐学习:javascript高级教程

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

11

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号