setInterval和setTimeout事件的区别与方法

发布时间:2020-09-25编辑:脚本学堂
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一样。