js定时器关闭，js定时器停止，一次关闭所有正在运行的定时器，自定义函数clearIntervals()一次关闭所有正在运行的定时器
<!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()一次关闭所有正在运行的定时器的更多相关文章
- js课程 3-9 js内置对象定时器和超时器怎么使用
js课程 3-9 js内置对象定时器和超时器怎么使用 一.总结 一句话总结:定时器: 1.定义 sobj=setInterval(func,1000); 2.清除 cl ...
- JS进阶 ] 分析JS中的异步操作
写在前面 JS因为是单线程的,所以在执行事务的时候,往往会因为某个事务的延迟,而导致服务器假死,这时候异步编程就显的格外重要,但是异步编程一般理解为回调函数callback,典型的就是node,回调函 ...
- 从浏览器多进程到JS单线程，JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要
奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...
- JS系列：js节点
节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...
- 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器
回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- Matlab基本功能：自定义函数、添加块注释、定时器的试用
1.自定义函数 新建一个m文件 在m文件里面第一行输入function [X,Y]=pll(X1,Y1,X2,Y2),这里x1 x2 y1 y2是你函数的输入值, x y是输出值,接着定义你要实现的功 ...
随机推荐
- Spring Boot 2整合Redis做缓存
既然是要用Redis做缓存,自然少不了安装了.但是本文主要讲Spring Boot与Redis整合.安装教程请另行百度! 1.首先是我们的Redis配置类 package com.tyc; impor ...
- 使用Fiddler抓包、wireshark抓包分析(三次握手、四次挥手深入理解)
==================Fiddler抓包================== Fiddler支持代理的功能,也就是说你所有的http请求都可以通过它来转发,Fiddler代理默认使用端口 ...
- LeetCode-SQL(一)
1.组合两个表 表1: Person +-------------+---------+| 列名 | 类型 |+-------------+---------+| Person ...
- Zookeeper学习笔记：简单注册中心
zookeeper可以作为微服务注册中心,spring cloud也提供了zookeeper注册中心的支持. 本文介绍如何实现一个简单的zookeeper注册中心,主要的实现方式: n个服务提供者对外 ...
- VIM编辑器使用的小技巧
在命令中输入 vi –t 类型名.结构体名或者函数名 系统就会寻找相应的对象,默认是在当前目录的 tags 中搜索,例如我们想寻找 stat 结构体, 则输入 vi –t stat 然后按 q 退出 ...
- 使用DES算法实现加密解密
使用DES算法实现加密解密 我们常见的加密算法有DES.MD5.IDEA.AES等等,这篇随笔介绍使用DES算法实现加密解密 首先介绍一下DES算法: DES算法为密码体制中的对称密码体制,又被称为美 ...
- Beego 学习比较8：SQL语句
SQL语句 1> 常用的SQL语句 1->新增 insert into 表名(字段A,字段B,…) Values(字段A值,字段B值,…) 2->更新 update 表名 ...
- 服务上的图片直接在浏览器上可以打开，但是在img上报404错误处理方法
在index.html中添加代码如下 <meta name="referrer" content="no-referrer" /> 如果还是存在问题 ...
- Vue学习之动画小结（六）
一.Vue中实现动画的方式:https://cn.vuejs.org/v2/guide/transitions.html Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括 ...
- 英文INSURAUNCE保险INSURAUNCE词汇
世界保险INSURAUNCE 人类社会从开始就面临着自然灾害和意外事故的侵扰,在与大自然抗争的过程中,古代人们就萌生了对付灾害事故的保险思想和原始形态的保险方法.公元前2500年前后,古巴比伦王国国王 ...