JavaScript 定時事件
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript 可以在設定的時間間隔內執行。 這被稱為定時事件。 |
定時事件
window 物件允許在設定的時間間隔內執行程式碼。
這些時間間隔被稱為定時事件。
要使用 JavaScript 的兩個關鍵方法是
setTimeout(函式, 毫秒)
在等待指定的毫秒數後執行一個函式。setInterval(函式, 毫秒)
與 setTimeout() 相同，但會連續重複執行函式。
setTimeout() 和 setInterval() 都是 HTML DOM Window 物件的的方法。
setTimeout() 方法
window.setTimeout(函式,毫秒);
可以省略 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(函式,毫秒);
clearTimeout(myVar);
如果函式尚未執行，您可以透過呼叫 clearTimeout() 方法來停止執行
示例
與上面相同的示例，但添加了一個“停止”按鈕
<button onclick="myVar = setTimeout(myFunction, 3000)">嘗試一下</button>
<button onclick="clearTimeout(myVar)">停止它</button>
自己動手試一試 »
setInterval() 方法
setInterval() 方法在每個給定的時間間隔重複一個給定的函式。
window.setInterval(函式,毫秒);
可以省略 window.setInterval() 方法的 window 字首。
第一個引數是要執行的函式。
第二個引數表示每次執行之間的時間間隔長度。
此示例每秒執行一次名為“myTimer”的函式（就像數字手錶一樣）。
示例
顯示當前時間
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
自己動手試一試 »
一秒鐘有 1000 毫秒。
如何停止執行？
clearInterval() 方法停止 setInterval() 方法中指定的函式的執行。
window.clearInterval(timerVariable)
可以省略 window.clearInterval() 方法的 window 字首。
clearInterval() 方法使用從 setInterval() 返回的變數
let myVar = setInterval(函式,毫秒);
clearInterval(myVar);
示例
與上面相同的示例，但我們添加了一個“停止時間”按鈕
<p id="demo"></p>
<button onclick="clearInterval(myVar)">停止時間</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
自己動手試一試 »
