區別:
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單線程的一些事