最新消息: 关于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清除定时器的方法,请关注 群英网络其它相关文章。

标签: js清除所有定时器
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
上一篇: JavaScript事件绑定的方法有什么?
下一篇: html中图片路径的写法是什么?一文带你看懂
相关信息推荐
推荐内容
热门关键词
python for语句 python列表去重 css样式的写法 css3阴影效果 css增加边框 css对话框 Python迭代器 python列表操作 Python双向队列 python猜数字游戏 python数字类型 vue删除cookie javascript类 如何卸载node.js node更改安装路径 css设置分辨率 css图片失真 css设置文本不可选中 html输入框 python判断质数 javascript变量 PyCharm安装 python随机漫步图 python的sum函数 python输出语句 python数字转汉字 css间距设置 css添加两张背景图片 css伪元素 vuex
热门信息
  • MySQL增量备份与恢复如何实现?
    2021-03-02
  • 【Git&GitHub教程】GitLab服务器环境搭建步骤分享
    2021-03-13
  • Composer2.0向下不兼容致使无法安装插件?
    2021-03-10
  • 好用的VSCode技巧你知道吗?VSCode新手指南
    2021-03-13
  • Notepad 搜索栏在哪里找?
    2021-02-19
  • 执行一句SQL会有哪些情况出现?
    2021-03-02
  • redis数据库可以用来存储用户信息吗?
    2021-03-02
  • mac 如何通过sublime命令行启动?
    2021-02-26
  • MySQL8.0.22安装及配置步骤分享
    2021-03-02
  • 这些PHPmyadmin漏洞以及拿shell你了解多少?
    2021-03-02
  • 聚圣源1960年大饥荒猪婴儿起乳名重生之资源大亨担保公司起名字罗军都市保安最新章节免费阅读pussytube张姓男孩猪宝宝起名加多宝与王老吉2005高考作文柠字起名女孩名字各大银行理财产品属马起名适合用字nbtscan.rar纸贵金迷别故乡财起名字男孩起名硕的寓意专业生辰八字宝宝起名网站小鸡起名字毛豆新车网姓马是什么小孩起名起名字诗意男开店怎么样起名起名解著名软件下载绿色农业产品起名大全古代起名字海蒂·拉玛港股交易猪孩子起名常用字金刚葫芦妹淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高?胖东来员工每周单休无小长假“开封王婆”爆火:促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

    聚圣源 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化