区别:
setTimeout
可以使一段代码在指定时间后运行;而 setInterval
则可以使一段代码每过指定时间就运行一次。
setInterval
为自动重复,setTimeout
不会重复。
clearTimeout
(对象) 清除已设置的setTimeout对象,clearInterval
(对象) 清除已设置的。它们接收一个id,表示一个定时器。
setTimeout(code,millisec)
code (必需):要调用的函数后要执行的 JavaScript 代码串。
millisec(必需):在执行代码前需等待的毫秒数。
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
实例一:
点击按钮,5秒后显示消息框。
<html>
<head>
<script type="text/javascript">
function timedMsg() {
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的消息框!" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>
</html>
实例二:
点击“开始计时”按钮,输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
<html>
<head>
<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>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。</p>
</body>
</html>
setInterval(code,millisec[,"lang"])
code (必需):要调用的函数后要执行的 JavaScript 代码串。
millisec(必需):在执行代码前需等待的毫秒数。
实例:使用 setInterval() 和 clearInterval()
一个有趣的现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
alert(1);
setTimeout("alert(2)", 0);
alert(3);
</script>
</body>
</html>
执行结果为 1- 3 - 2,这说明了 settimeout(0)
并不是立即执行。
因为 js引擎是单线程执行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
var isEnd = true;
window.setTimeout(function () {
isEnd = false;//1s后,改变isEnd的值
}, 1000);
while (isEnd);
alert('end');
</script>
</html>
isEnd
默认是true
的,在while
中是死循环的.最后的alert
是不会执行的。
关于单线程,可读:关于JavaScript单线程的一些事