JavaScript中停止setInterval和setTimeout定时器的方法

在JavaScript代码中处理循环事件时，开发者通常会使用setInterval和setTimeout这两个核心方法。本文将简要探讨在需要终止这些循环事件时，具体应该采取哪些操作手段。

停止setInterval定时器的方法

首先来看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方法的语法为：clearInterval(id_of_setinterval)。

其中，参数id_of_setinterval代表由setInterval()方法返回的ID值。

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

停止setTimeout定时器的方法

其次，setTimeout方法用于在指定的毫秒数之后调用函数或执行计算表达式。若要停止该方法，可以使用clearTimeout方法。具体示例如下：

提示：setTimeout()仅执行代码一次。如果需要多次调用，请使用setInterval()，或者让代码自身再次调用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方法的语法为：clearTimeout(id_of_settimeout)。

参数id_of_setinterval表示由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块。