JavaScript中停止执行setInterval和setTimeout事件的方法


Posted in Javascript onMay 14, 2015

js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作。

(1)setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,停止该方法可使用 clearInterval 方法。具体示例如下:

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<input type="text" id="clock" size="50" />

<script language=javascript>

var int=self.setInterval("clock()",50);//每隔 50 毫秒调用 clock() 函数

function clock(){

 var t=new Date();

 document.getElementById("clock").value=t;

}

</script>

<button onclick="window.clearInterval(int)">停止 interval</button>

</body>

</html>

语法 clearInterval(id_of_setinterval)

参数 id_of_setinterval 表示由 setInterval() 返回的 ID 值。

clearInterval() 方法可取消由 setInterval() 设置的 timeout;clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

(2)setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。停止该方法可使用 clearTimeout 方法。具体示例如下:

提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

var c=0;

var t;

function timedCount(){

 document.getElementById('txt').value=c;

 c=c+1;

 t=setTimeout("timedCount()",1000);

}

function stopCount(){

 clearTimeout(t);

}

</script>

</head>

<body>

<input type="button" value="开始计数" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="停止计数" onClick="stopCount()">

</body>

</html>

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法 clearTimeout(id_of_settimeout)

参数 id_of_setinterval 表示由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

Javascript 相关文章推荐
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 #Javascript
JS实现简洁、全兼容的拖动层实例
May 13 #Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 #Javascript
javascript鼠标滑动评分控件完整实例
May 13 #Javascript
javascript实现链接单选效果的方法
May 13 #Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 #Javascript
javascript实现table表格隔行变色的方法
May 13 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP生成随机密码类分享
2014/06/25 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
JS实现图片切换特效
2019/12/23 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python 变量初始化空列表的例子
2019/11/28 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
中科软笔试题和面试题
2014/10/07 面试题
安全生产承诺书
2014/03/26 职场文书
省文明单位申报材料
2014/05/08 职场文书
大学生工作求职信
2014/06/23 职场文书
财务管理专业自荐书
2014/09/02 职场文书
怎样写离婚协议书
2014/09/10 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
社区党支部承诺书
2015/04/29 职场文书
签约仪式致辞
2015/07/30 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书