JavaScript中停止执行setInterval和setTimeout事件的方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 值。
该值标识要取消的延迟执⾏代码块。