JavaScript中停止执行setInterval和setTimeout事件的方法
更新时间：2015年05月14日 09:15:57 投稿：junjie
这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下
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 SetInterval与setTimeout使用方法详解
- JavaScript中SetInterval与setTimeout的用法详解
- Js中setTimeout()和setInterval() 何时被调用执行的用法
- javascript中SetInterval与setTimeout的定时器用法
- JavaScript定时器setTimeout()和setInterval()详解
- js中的setInterval和setTimeout使用实例
- Javascript对象中关于setTimeout和setInterval的this介绍
- JavaScript中setTimeout和setInterval函数的传参及调用
- JavaScript setTimeout和setInterval的使用方法 说明
- JavaScript setTimeout和setInterval的用法与区别详解
相关文章
发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知2022-12-12
本文主要介绍了js实现带农历和八字等信息的日历特效,小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
这篇文章主要介绍了JS 创建对象的模式,结合实例形式总结分析了JS 创建对象的各种常用模式,包括工厂模式、构造函数模式、原型模式、组合构造和原型模式、动态原型模式、寄生构造函数模式、稳妥构造模式等,需要的朋友可以参考下2020-04-04
下面小编就为大家带来一篇canvas基础绘制-绚丽倒计时的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下2016-05-05
javascript的onchange事件与jQuery的change()方法比较
本来是想添加文本框文本内容改变事件动作的，结果找了许多这方面的javascript代码都不如意。2009-09-09
用js实现弹出层效果，一般用于代替alert2008-03-03
这篇文章主要介绍了一文理解JavaScript装饰器模式，文章基于JavaScript的相关资料展开详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要为大家详细介绍了js实现抽奖的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了如何实现小程序tab栏下划线动画效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论