JavaScript Timing 事件

JavaScript 可以在時間間隔內執行。

這就是所謂的定時事件（ Timing Events）。

Timing 事件

window 對象允許以指定的時間間隔執行代碼。

這些時間間隔稱為定時事件。

通過 JavaScript 使用的有兩個關鍵的方法：

setTimeout(function, milliseconds)
在等待指定的毫秒數后執行函數。
setInterval(function, milliseconds)
等同于 setTimeout()，但持續重復執行該函數。

setTimeout() 和 setInterval() 都屬于 HTML DOM Window 對象的方法。

setTimeout() 方法

window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不帶 window 前綴來編寫。

第一個參數是要執行的函數。

第二個參數指示執行之前的毫秒數。

實例

單擊按鈕。等待 3 秒，然后頁面會提示 "Hello"：

<button onclick="setTimeout(myFunction, 3000)">試一試</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

親自試一試

如何停止執行？

clearTimeout() 方法停止執行 setTimeout() 中規定的函數。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不帶 window 前綴來寫。

clearTimeout() 使用從 setTimeout() 返回的變量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

實例

類似上例，但是添加了“停止”按鈕：

<button onclick="myVar = setTimeout(myFunction, 3000)">試一試</button>
<button onclick="clearTimeout(myVar)">停止執行</button>

親自試一試

setInterval() 方法

setInterval() 方法在每個給定的時間間隔重復給定的函數。

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不帶 window 前綴來寫。

第一個參數是要執行的函數。

第二個參數每個執行之間的時間間隔的長度。

本例每秒執行一次函數 "myTimer"（就像數字手表）。

實例

顯示當前時間：

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

親自試一試

一秒有 1000 毫秒。

如何停止執行？

clearInterval() 方法停止 setInterval() 方法中指定的函數的執行。

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不帶 window 前綴來寫。

clearInterval() 方法使用從 setInterval() 返回的變量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

實例

類似上例，但是我們添加了一個“停止時間”按鈕：

<p id="demo"></p>
<button onclick="clearInterval(myVar)">停止時間</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

親自試一試

更多實例

另一個簡單的計時
由計時時間創建的時鐘