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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
layui radio性别单选框赋值方法
Aug 15 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 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
?繁体转换的class
2006/10/09 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python中标准模块importlib详解
2017/04/16 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
Python 读取位于包中的数据文件
2020/08/07 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
文明生主要事迹
2014/05/25 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP