JavaScript 定時器

在本教程中,你將學習 JavaScript 中的計時器功能。

使用計時器

計時器是使我們能夠在特定時間執行功能的功能。

使用計時器可以延遲程式碼的執行,以便在觸發事件或載入頁面的確切時刻無法完成。例如,你可以使用計時器定期更改網站上的廣告橫幅,或顯示實時時鐘等。JavaScript 中有兩個計時器功能: setTimeout()setInterval()

以下部分將向你展示如何建立計時器以延遲程式碼執行,以及如何在 JavaScript 中使用這些函式重複執行一個或多個操作。

延遲後執行程式碼

setTimeout() 函式用於在一段時間後執行一次函式或指定的程式碼。它的基本語法是,

setTimeout(function, milliseconds)

此函式接受兩個引數:一個是 function ,它是要執行的函式,以及一個可選的 delay 引數,它是表示在執行函式之前等待的時間量(1 秒= 1000 毫秒)的毫秒數。讓我們看看它是如何工作的:

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>

上面的示例將在單擊按鈕 2 秒後顯示警告訊息。

注意: 如果省略或未指定 delay 引數,則使用 0 值,即意味著立即執行指定的功能,或者儘快執行。

以固定間隔執行程式碼

同樣,你可以使用 setInterval() 函式以固定的時間間隔重複執行函式或指定的程式碼段。它的基本語法是。

setInterval(function, milliseconds)

此函式還接受兩個引數:一個是 function ,它是要執行的函式,以及 interval ,它是表示在執行函式之前等待的時間量(1 秒= 1000 毫秒)的毫秒數。這是一個例子:

<script>
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: </p>

上面的例子將在 1 秒後重復執行 showTime() 函式。此函式檢索計算機上的當前時間並將其顯示在瀏覽器中。

停止執行程式碼或取消定時器

setTimeout()setInterval() 方法都返回一個唯一的 ID(一個正整數值,稱為計時器識別符號),它標識由這些方法建立的計時器。

此 ID 可用於禁用或清除計時器並預先停止執行程式碼。清除定時器可以使用兩個函式完成: clearTimeout()clearInterval()

<script>
var timeoutID;
 
function delayedAlert() {
  timeoutID = setTimeout(showAlert, 2000);
}
 
function showAlert() {
  alert('This is a JavaScript alert box.');
}
 
function clearAlert() {
  clearTimeout(timeoutID);
}
</script>
 
<button onclick="delayedAlert();">Show Alert After Two Seconds</button>
 
<button onclick="clearAlert();">Cancel Alert Before It Display</button>

類似地,clearInterval() 方法用於清除或禁用 setInterval() 計時器。

<script>
var intervalID;
 
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
 
function stopClock() {
    clearInterval(intervalID);
}
 
var intervalID = setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: </p>
 
<button onclick="stopClock();">Stop Clock</button>

注意: 理論上你可以互換使用 clearTimeout()clearInterval() 。但是,為了清晰和程式碼可維護性,你應該避免這樣做。