js定时器关闭,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器,原理:利用数组存储定时器id,然后遍历数组,关闭定时器
附上页面的截图,代码在截图下,想看效果就自己复制下边的代码,保存个页面看吧:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearIntervals()一次关闭所有定时器</title>
</head>
<body>
<div>下面有三个定时器  以不一样的时间间隔输出不同内容</div><br><br>
<input type='button' value='输出“liu” 初始一秒4次' >
<input type="button" value="输出“jin” 初始一秒2次">
<input type="button" value="输出“yu” 初始一秒1次">
<button id='clear' style='margin-left:50px;'>清除所有定时器</button>
<div id="div1"></div>
 
<script type="text/javascript">

var oDiv = document.getElementById('div1');
    var aInput = document.getElementsByTagName('input');
    var oBtn = document.getElementById('clear');
    var arr = [];
    var txt = '';
    //每次生成的定时器都单独有一个数组里的位置,避免了冲突
    aInput[0].onclick=function(){
        arr.push(setInterval(liu, 250));
    }
    aInput[1].onclick=function(){
        arr.push(setInterval(jin, 500));
    }
    aInput[2].onclick=function(){
        arr.push(setInterval(yu, 1000));
    }
    //调用自定义函数 用一个for循环 关闭数组中存储的所有定时器;
    oBtn.onclick=function(){
        clearIntervals(arr);
    }

function liu(){
        txt = txt.concat(' Liu')
        oDiv.innerHTML=txt;
        return txt;
    }
    function jin(){
        txt = txt.concat(' Jin')
        oDiv.innerHTML=txt;
        return txt;
    }
    function yu(){
        txt = txt.concat(' Yu')
        oDiv.innerHTML=txt;
        return txt;
    }
    //原理 用一个数组来保存所有定时器的id
    function clearIntervals(array){
        for (var i = array.length - 1; i >= 0; i--) {
            // if (typeof array[i] !== 'undefined') {
                clearInterval(array[i]);
            // };
        };
    }

</script>
</body>
</html>

js定时器关闭,js定时器停止,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器的更多相关文章

  1. js课程 3-9 js内置对象定时器和超时器怎么使用

    js课程 3-9 js内置对象定时器和超时器怎么使用 一.总结 一句话总结:定时器:    1.定义    sobj=setInterval(func,1000);        2.清除    cl ...

  2. JS进阶 ] 分析JS中的异步操作

    写在前面 JS因为是单线程的,所以在执行事务的时候,往往会因为某个事务的延迟,而导致服务器假死,这时候异步编程就显的格外重要,但是异步编程一般理解为回调函数callback,典型的就是node,回调函 ...

  3. 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  4. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  5. swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要

    奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...

  6. JS系列:js节点

    节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...

  7. 前端(十三)—— JavaScript高级:回调函数、闭包、循环绑定、面向对象、定时器

    回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  9. Matlab基本功能:自定义函数、添加块注释、定时器的试用

    1.自定义函数 新建一个m文件 在m文件里面第一行输入function [X,Y]=pll(X1,Y1,X2,Y2),这里x1 x2 y1 y2是你函数的输入值, x y是输出值,接着定义你要实现的功 ...

随机推荐

  1. Prometheus安装部署说明

    本文主要介绍了如何二进制安装Prometheus.使用 Node Exporter 采集主机信息并使用Grafana来进行图形化的展示. 1. 安装Prometheus Server Promethe ...

  2. python入门之名称空间

    name = 'tank' 什么是名称空间? 存放名字的空间 如果你想访问一个变量值,必须先访问对应的名称空间,拿到名字和对应的内存地址的绑定关系 名称空间的分类: 1.内置名称空间: python提 ...

  3. Win 10卡顿怎么办?解决win10卡顿的方法大汇总

    最近微软开始向Windows 10用户推送创造者更新(Creators Update),相信也有很多小伙伴已经尝鲜了这一最新的版本.而对于win10的使用体验,很多小伙伴第一个抱怨的问题便是win10 ...

  4. [转] js async await 终极异步解决方案

    阅读目录 回顾 Promise async await 字面理解 async.await 如何执行 await 操作符 总结 既然有了promise 为什么还要有async await ? 当然是pr ...

  5. YAML语言简明教程

    编程免不了要写配置文件,如果你还在用xml/ini/json,就有点过时了,怎么写配置也是一门学问. YAML 是专门用来写配置文件的语言,非常简洁和强大,远比 JSON 格式方便. 本文介绍 YAM ...

  6. HeRaNO's NOIP CSP Round Day 2 T2 PESTC

    对于我这种菜鸡来说还是挺有迷惑性的. 在考场发现答案问的是跟最值有关的数量,想到二分,结果果然具有单调性,考虑二份答案+验证 其实什么反转什么的,可以不用去管他,对于长度小于二分答案mid的道路,不去 ...

  7. Linux命令:scp

    1.find命令: scp [参数] [原路径] [目标路径] 2.用法: scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令.linux的sc ...

  8. vue + yarn 项目开发 (一)

    1.打开src文件夹中的main.js文件,添加引用element ui框架 import ElementUI from 'element-ui' import 'element-ui/lib/the ...

  9. OCR3:tesseract script

    通过命令:tesseract -h 可查看 OCR操作脚本参数: 其中参数说明: –-oem:指定使用的算法,0:代表老的算法:1:代表LSTM算法:2:代表两者的结合:3:代表系统自己选择. –-p ...

  10. C#语法一些简化备忘

    有些传统的写法,可以简写,之前没留意到,现在才注意到 IDE0031: Null check can be simplified entity.Unit = entity.Unit == null ? ...