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

前端技术 2023/09/08 JavaScript

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 值。该值标识要取消的延迟执行代码块。

本文地址：https://www.stayed.cn/item/21487

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案