iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >javascript如何清除所有定时器
  • 787
分享到

javascript如何清除所有定时器

2024-04-02 19:04:59 787人浏览 泡泡鱼
摘要

小编给大家分享一下javascript如何清除所有定时器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

小编给大家分享一下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来保存,所以可以直接把timerclearInterval传进去就清除掉了
但是第二个定时器我们没有保存它,clearInterval的时候不知道要传什么,这就很操蛋了

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

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

运行结果:

javascript如何清除所有定时器

显然易得:
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);
}

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

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

javascript如何清除所有定时器

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

javascript如何清除所有定时器

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

以上是“javascript如何清除所有定时器”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: javascript如何清除所有定时器

本文链接: https://www.lsjlt.com/news/80688.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript如何清除所有定时器
    小编给大家分享一下javascript如何清除所有定时器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • javascript定时器清除的方法
    这篇文章主要介绍了javascript定时器清除的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript的特点1.JavaScript主要用来向HTML页面添...
    99+
    2023-06-14
  • es6如何清除定时器
    今天小编给大家分享一下es6如何清除定时器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 ...
    99+
    2022-10-19
  • JavaScript清除定时器怎么使用
    这篇文章主要介绍“JavaScript清除定时器怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript清除定时器怎么使用”文章能帮助大家解决问题...
    99+
    2022-10-19
  • win8如何清除所有数据
    这篇“win8如何清除所有数据”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“win8如何清...
    99+
    2022-12-08
    win8
  • 如何使用@CacheEvict清除指定下所有缓存
    这篇文章将为大家详细讲解有关如何使用@CacheEvict清除指定下所有缓存,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。@CacheEvict清除指定下所有缓存@CacheEvict(ca...
    99+
    2023-06-22
  • Vue如何优雅的清除定时器
    目录前言 优化 衍生问题:beforeDestroy 没有触发? 前言 清除定时器,相信有相当一部分人是这么写的: export default { data() { ...
    99+
    2022-11-12
  • es6数组如何清除所有元素
    这篇文章主要介绍“es6数组如何清除所有元素”,在日常操作中,相信很多人在es6数组如何清除所有元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6数组如何清除所有元素”...
    99+
    2022-10-19
  • 如何解决AngualrJs清除定时器遇到的坑
    这篇文章给大家分享的是有关如何解决AngualrJs清除定时器遇到的坑的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。angualrJs清除定时器爬坑之路:发现一个奇怪问题,放在自...
    99+
    2022-10-19
  • jquery如何清除元素下的所有子元素
    今天小编给大家分享一下jquery如何清除元素下的所有子元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    99+
    2022-10-19
  • 如何清除阿里云服务器的所有数据记录?
    阿里云服务器作为云计算服务的重要组成部分,提供了大量的数据存储和处理能力。然而,如果数据记录过多或者过旧,可能会占用大量的存储空间,甚至影响服务器的性能。本文将详细说明如何清除阿里云服务器的所有数据记录。 清除阿里云服务器的所有数据记录的步...
    99+
    2023-11-10
    阿里 服务器 数据
  • vue如何设置定时器和清理定时器
    目录设置定时器和清理定时器1.在data中声明要设置的定时器名称2.在mounted中创建定时器定时器的使用全解1.vue使用定时器2代码实现设置定时器和清理定时器 使用钩子函数对定...
    99+
    2022-11-13
  • javascript数组如何删除所有元素
    这篇文章主要介绍javascript数组如何删除所有元素,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方法:1、使用“arr=[]”语句来删除;2、使用“arr.length=0”语句来删除;3、使用splice()...
    99+
    2023-06-14
  • SpringBoot Security如何实现单点登出并清除所有token
    今天小编给大家分享一下SpringBoot Security如何实现单点登出并清除所有token的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获...
    99+
    2023-07-05
  • vue中如何清除路由事件beforeRouteLeave及组件内定时器
    小编给大家分享一下vue中如何清除路由事件beforeRouteLeave及组件内定时器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一...
    99+
    2022-10-19
  • windows如何清理C盘除了系统外所有的东西
    本篇内容介绍了“windows如何清理C盘除了系统外所有的东西”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!清理C盘除了系统外所有的东西的教...
    99+
    2023-07-01
  • javascript如何去除字符串的所有逗号
    本篇内容介绍了“javascript如何去除字符串的所有逗号”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • Oracle如何清除一个用户下的所有表(谨慎操作!)
    执行该操作要慎重,不然可能会造成很严重的后果! 使用工具: plsql developeroracle 数据库 前段时间部署程序的时候导入数据有问题,需要重新导入。然后保险起见把原来的表全部删掉之后再...
    99+
    2023-03-09
    oracle删除用户下的所有表 oracle清除数据库用户命令 oracle数据库删除表
  • java如何删除所有出现的指定字符
    这篇文章主要介绍了java如何删除所有出现的指定字符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如何删除所有出现的指定字符字符串类没有提供 remove() 方法,但提供了...
    99+
    2023-06-27
  • php如何去除指定字符后面所有字符
    这篇“php如何去除指定字符后面所有字符”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php如何去除指定字符后面所有字符”文...
    99+
    2023-06-29
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作