最新的Web開發教程
 

JavaScript計時事件


1
2
3
4
6
7
8
9
10
11
12

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

這就是所謂的定時事件。


計時事件

窗口對象允許代碼執行指定的時間間隔。

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

使用JavaScript使用兩個關鍵方法是:

  • setTimeout( function, milliseconds )
    執行功能,在等待的毫秒指定次數後。
  • setInterval( function, milliseconds )
    相同setTimeout()但連續地重複功能的執行。

setTimeout()setInterval()是HTML DOM Window對象的方法。


setTimeout()方法

window.setTimeout(function, milliseconds);

所述window.setTimeout()方法可以在沒有窗口前綴被寫入。

第一個參數是將要執行的功能。

第二參數表示執行前的毫秒數。

點擊一個按鈕。 等待3秒,頁面會提示“你好”:

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>
試一試»

如何停止執行?

所述clearTimeout()方法停止中指定的功能的執行setTimeout()

window.clearTimeout( timeoutVariable )

所述window.clearTimeout()方法可以在沒有窗口前綴被寫入。

clearTimeout()方法使用返回的變量setTimeout()

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

如果該功能尚未執行,您可以通過調用停止執行clearTimeout()方法:

上面同樣的例子,但有一個附加的“停止”按鈕:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>
試一試»

setInterval()方法

所述setInterval()方法重複在每個給定時間間隔的給定的功能。

window.setInterval(function, milliseconds);

所述window.setInterval()方法可以在沒有窗口前綴被寫入。

第一個參數是將要執行的功能。

所述第二參數表示每次執行之間的時間間隔的長度。

這個例子執行一個調用的函數"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( )方法可以在沒有窗口前綴被寫入。

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

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

如上面同樣的例子,但我們已經增加了“停止時間”按鈕:

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
試一試»

例子

更多示例

另一個簡單的計時

具有定時事件創建的時鐘