JavaScript中setInterval与setTimeout的使用及区别

setInterval() 定时器详解

setInterval() 定义和用法

setInterval() 方法用于按照指定的周期（以毫秒为单位）反复执行函数或表达式。该函数会持续循环调用，直到通过 clearInterval() 明确停止，或者浏览器窗口被关闭。clearInterval() 接收的参数正是 setInterval() 返回的定时器 ID。

语法

setInterval(code, millisec[, "lang"]) code：必需参数，指定要调用的函数或要执行的代码字符串。 millisec：必需参数，指定每次执行 code 之间的时间间隔，单位为毫秒。

返回值

返回一个整数 ID 值，该值可传递给 Window.clearInterval()，用于取消对 code 的周期性执行。

使用示例：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=setInterval("clock()",50);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
}
</script>
</form>
<button onclick="window.clearInterval(int)">
停止 interval 事件</button>
</body>
</html>

setTimeout() 定时器详解

setTimeout() 定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。与 setInterval() 不同，该方法仅执行一次代码。

语法 setTimeout(code, millisec) code：必需参数，指定要调用的函数后要执行的 JavaScript 代码串。 millisec：必需参数，指定在执行代码前需等待的毫秒数。

提示： （1）虽然 setTimeout() 默认只执行一次，但若需多次调用，除了使用 setInterval() 外，还可以在被执行的代码内部再次调用 setTimeout() 方法，从而实现循环执行的效果。 （2）setTimeout() 同样会返回一个 ID 值，可通过 clearInterval() 方法使用该 ID 来取消定时器的执行。

使用示例：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="javascript">
function timedMsg(){
var t=setTimeout("alert('3 秒时间到!')",3000);
}
function timedMsgAways(){
alert('3 秒时间到!');
var t=setTimeout("timedMsgAways()",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="3 秒后警告" onClick="timedMsg()"><br />
<input type="button" value="循环 3 秒警告" onClick="timedMsgAways()">
</form>
</body>
</html>

setInterval 与 setTimeout 的选择建议

对于这两个方法，需要注意：如果要求在每隔一个固定的时间间隔后精确地执行某动作，最好使用 setInterval；而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数调用需要繁重的计算以及很长的处理时间，那么最好使用 setTimeout。