JavaScript中停止执行setInterval和setTimeout事件的常常被初学者搞混,分不清两者的区别,本文给出代码和语法介绍,讲解两者怎么使用和区别。
js 代码中执行循环事件时,常常用到 setInterval 和 setTimeout 这两个方法,简要介绍需要停止循环事件的时候该如何操作。
先介绍setInterval
setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,停止该方法可使用 clearInterval 方法。下面举例说明:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="text" id="clock" size="100" />
<script language=javascript>
var int=self.setInterval("clock()",100);//每隔100 毫秒调用 clock() 函数
function clock(){
var times=new Date();
document.getElementById("clock").value=times;
}
</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 值。
接下来介绍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(id_of_settimeout)
参数 id_of_setinterval 表示由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
setInterval和setTimeout的区别
setTimeout(表达式,延时时间) 在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
而setInterval(表达式,交互时间) 则不一样,它从载入后,每隔指定的时间就执行一次表达式
但是两个东西完全可以相互模拟,具体使用哪一个,看当时的需求而定。就像for可以模拟所有的循环,而还是提供了while一样。