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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
微信小程序以ssm做后台开发的实现示例
Apr 08 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遍历目录viewDir函数
2009/12/15 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
Python计时相关操作详解【time,datetime】
2017/05/26 Python
EM算法的python实现的方法步骤
2018/01/02 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
python 如何实现遗传算法
2020/09/22 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
MYSQL支持事务吗
2013/08/09 面试题
留学生如何写好自荐信
2013/12/27 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
献爱心活动总结
2014/05/07 职场文书
倡议书范文格式
2014/05/12 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
负责人任命书范本
2014/06/04 职场文书
三峡人家导游词
2015/01/31 职场文书
采购员岗位职责范本
2015/04/07 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
python数字图像处理:图像的绘制
2022/06/28 Python