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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
vue中使用props传值的方法
May 08 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
浅谈vue的踩坑路
2017/08/31 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
解析python实现Lasso回归
2019/09/11 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python修改列表值问题解决方案
2020/03/06 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Python中如何定义一个函数
2016/09/06 面试题
应用外语系自荐信
2014/06/26 职场文书
工作总结与自我评价
2014/09/18 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
逃课检讨书
2015/01/26 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
详解如何使用Nginx解决跨域问题
2022/05/06 Servers