setTimeout和setInterval的用法

JavaScript 計時事件

JavaScript可以按時間間隔執行。這稱為計時事件。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)">Try it</button>
<script>
function myFunction() {
  alert('Hello');
}
</script>

如何停止執行setTimeout？
clearTimeout()方法停止執行setTimeout()中指定的函數。

window.clearTimeout(timeoutVariable)
window.clearTimeout()可以在沒有window前綴的情況下編寫該方法。

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()可以在沒有window前綴的情況下編寫該方法。

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

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

此示例每秒執行一次名為“myTimer”的函數（如數字手表）。

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

如何停止執行setInterval？
clearInterval()方法停止執行setInterval（）方法中指定的函數。

window.clearInterval(timerVariable)
window.clearInterval()可以在沒有window前綴的情況下編寫該方法。

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>

更多HTML BOM Window對象的方法