JavaScript中停止执行setInterval和setTimeout事件的方法-js教程-PHP中文网

JavaScript中停止执行setInterval和setTimeout事件的方法

高洛峰

发布： 2017-02-08 16:02:00

原创

1461人浏览过

这篇文章主要介绍了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 值。

立即学习“Java免费学习笔记（深入）”；

clearInterval() 方法可取消由 setInterval() 设置的 timeout；clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

（2）setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。停止该方法可使用 clearTimeout 方法。具体示例如下：

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

提示：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事件的方法相关文章请关注PHP中文网！