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去除空格的几种方法
Oct 03 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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检查网站是否宕机的方法示例
2017/07/24 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python列表的增删改查实例代码
2018/01/30 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
如何基于python测量代码运行时间
2019/12/25 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python是怎样处理json模块的
2020/07/16 Python
python+opencv实现车道线检测
2021/02/19 Python
销售部主管岗位职责
2013/12/18 职场文书
学校万圣节活动方案
2014/02/13 职场文书
项目合作意向书范本
2014/04/01 职场文书
文艺晚会策划方案
2014/06/11 职场文书
商务经理岗位职责
2014/08/03 职场文书
2014年统战工作总结
2014/12/09 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书