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>
試一試»