JavaScript中setTimeout()和setInterval()兩個定時器的區別和使用方法
阿新 • • 發佈：2018-11-09
兩者最直接的區別是:
setTimeout()在載入後延遲指定時間去執行一次表示式,只是一次。
setInterval()它從載入後,每隔指定的時間就執行一次表示式
所以要讓一段程式碼, 某個函式以固定頻率重複執行應該使用setInterval()函式
如果讓一段程式碼, 某個函式在指定延遲後僅僅執行一次應該使用setTimeout()
語法
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)setTimeout(code, milliseconds, param1, param2, ...) setTimeout(function, milliseconds, param1, param2, ...)
| 引數 | 描述 |
|---|---|
| code/function | 必需。要呼叫一個程式碼串，也可以是一個函式。 |
| milliseconds | 必須。週期性執行或呼叫 code/function 之間的時間間隔，以毫秒計。 |
| param1, param2, ... | 可選。 傳給執行函式的其他引數（IE9 及其更早版本不支援該引數）。 |
需要注意的是:
這些函式都會返回一個 ID（數字），可以將這個ID傳遞給 clearTimeout() 和clearInterval() 來取消執行。
下邊用定時器實現了一個動態的時間顯示器:
程式碼:
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 使用定時器 </title> </head> <body onload="setTime();"> <span id="tm"></span> <script type="text/javascript"> // 定義定時器變數 var timer; // 儲存頁面執行的起始時間 var cur = new Date().getTime(); var setTime = function() { // 在tm元素中顯示當前時間 document.getElementById("tm").innerHTML = new Date().toLocaleString(); // 如果當前時間比起始時間大於60秒，停止定時器的排程 if (new Date().getTime() - cur > 60 * 1000) { // 清除timer定時器 clearInterval(timer); } } // 指定每隔1000毫秒執行setTime()函式一次 timer = setInterval("setTime();" , 1000); </script> </body> </html>
同樣的功能也能改為setTimeout()實現:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 使用定時器 </title>
</head>
<body>
<span id="tm"></span>
<script type="text/javascript">
// 定義定時器變數
var timer;
// 儲存頁面執行的起始時間
var cur = new Date().getTime();
var setTime = function()
{
// 在tm元素中顯示當前時間
document.getElementById("tm").innerHTML
= new Date().toLocaleString();
// 如果當前時間比起始時間小於等於60秒，執行定時器的排程
if (new Date().getTime() - cur <= 60 * 1000)
{
// 指定延遲1000毫秒後執行setTime()函式。
window.setTimeout("setTime();" , 1000);
}
}
// 直接呼叫setTime()函式
setTime();
</script>
</body>
</html>