当前栏目
如何清除全部的定时器
通过 setTimeout() 函数来建立定时器,并通过 clearTimeout() 函数来清除定时器。
let timerTimeout = setTimeout(() => {
console.log("2222222-----------------------------");
}, 1000);
clearTimeout(timerTimeout);
通过 setInterval() 函数来建立定时器,并通过 clearInterval() 函数来清除定时器。
let timerInterval = setInterval(() => {
console.log("11111111-----------------------------");
}, 2000);
clearInterval(timerInterval);
当我们给定时器赋值给一个变量的时候,可以通过 clearTimeout 和 clearInterval 来清除指定的定时器。我们如何来清除全部的定时器呢?
我们来看一段代码:
let timerTimeout = setTimeout(() => {
console.log(“2222222-----------------------------”);
}, 1000);
console.log(“timerTimeout-----------------------------”, timerTimeout);
let timerInterval = setInterval(() => {
console.log("11111111-----------------------------");
}, 2000);
console.log("timerInterval-----------------------------", timerInterval);
let timer3 = setTimeout(() => {
console.log("333333-----------------------------");
}, 1000);
console.log('timer3-----------------------------', timer3)
let timer4 = setInterval(() => {
console.log("44444444-----------------------------");
}, 1000);
通过打印 **timerTimeout ** 和 **timerInterval ** 的值,我们可以知道,每个定时器会返回一个number类型的ID值,并且会从1开始逐渐递增。setTimeout() 和 **setInterval()**共用一个ID,每有一个 setTimeout() 和 setInterval() 函数,ID值就会增加1。
通过以上的特性可知,当我们新建一个定时器的时候,这个定时器的 ID 的值是最大的,通过遍历所有的ID值,分别清除对应的定时器,即可清除全部的定时器。
let endTimer = setTimeout(() => {}, 100000);
for (let i = 0; i <= endTimer; i++) {
// 清除setInterval创建的定时器
clearInterval(i)
// 清除setTimeout创建的定时器
clearTimeout(i)
}
在 for 循环中调用 clearInterval 和 clearTimeout 是利用了这两个函数,当传入的值没有对应的定时器时,不会抛出错误的特性。这样不管ID值所对应的是 setInterval 创建的定时器还是 setTimeout 创建的定时器,或者没有定时器,都可以正确清除,并且不会抛出错误。
相关文章
- FreeBuf周报 | 成人视频网站StripChat数据库泄漏;macOS曝出零日漏洞
- LeetCode笔记:492. Construct the Rectangle
- CSS 基础知识
- 每次新增页面复制粘贴?100多行源码的 element-ui 的新增组件功能教你解愁
- Flutter 控件布局
- 面向数据的架构
- HTTP中Origin和Referer的区别?
- JavaScript 高频函数优化-函数防抖&函数节流
- js 动态修改_after_before伪元素content值
- JS中DOM事件流总结
- Electron快速上手并将网站直接生成桌面应用
- 分享 12 个重要的 JS 函数,建议每个前端开发人员都要搞清楚
- Wasm 为 Web 开发带来无限可能
- 前端面试 【JavaScript】— 什么是高阶函数?数组中的高阶函数有哪些?
- 前端面试 【JavaScript】— JS中将数组扁平化有哪些方法?
- 前端面试 【JavaScript】— JS判断数组中是否包含某个值
- js中的防抖和节流
- 使用newman实现http批量请求
- skywalking展示http请求和响应
- Andorid-JetPack-ViewModel组件