解釋 JavaScript 中定時器的工作原理
- WBOY轉載
- 2023-08-25 10:05:02781瀏覽
在 JavaScript 中，計時器是一個非常值得注意的功能。與普通的手錶定時器一樣，我們可以在某個時間啟動計時器，並在特定時間後執行 JavaScript 中的函數或程式碼。
簡單來說，我們可以使用計時器在延遲一段時間後執行程式碼。例如，當您造訪某個網站時，造訪3到4分鐘後就會顯示註冊框，我們可以使用JavaScript來實現。我們可以設定延遲計時器來顯示註冊彈出框。
現實生活中計時器的另一個很好的例子是應用程式內的廣告。當您開啟任何應用程式時，它會在 2 至 3 分鐘後開始顯示廣告，並以 1 至 2 分鐘的間隔更改廣告。
因此，JavaScript 中有兩種不同的函數可以設定計時器，我們將在本教學中探討。
使用 setTimeOut() 函數在特定時間後執行程式碼
setTimeOut() 函數允許我們在特定延遲後執行程式碼。然而，它允許我們定義延遲。它僅在特定延遲後執行一次代碼。
當setTimeOut()函數執行時，它會啟動計時器，並在特定的延遲後執行回調函數。
文法
使用者可以依照下列語法使用setTimeOut()函數。
let timeoutId = setTimeout(callback, delay);
在上面的語法中，回呼函數也可以是一個箭頭函數來執行。
參數
回呼 – 這是一個在延遲時間後執行的函數。
延遲 – 延遲是指在該時間之後執行回呼函數的時間（以毫秒為單位）。
傳回值
setTimeOut() 函數傳回唯一的 id，我們可以用它來終止計時器。
範例
在下面的範例中，當使用者點擊「啟動計時器」按鈕時，它將呼叫 callTimer() 函數。使用者可以看到它列印了“先執行的callTimer函數”，而在2000毫秒後，由於setTimeOut()函數在2000毫秒後調用了回調函數，所以它列印了“此函數在一段延遲後執行”。
<html>
<body>
<h2> Using the setTimeOut() function </h2>
<div id = "output"> </div>
<button id = "btn" onclick = "callTimer()"> Start Timer </button>
<script>
let output = document.getElementById("output");
output.innerHTML += "Program execution started </br>";
function callTimer() {
output.innerHTML = "The callTimer function executed <br/>";
setTimeout(callback, 2000);
}
function callback() {
output.innerHTML += "This function executed after some delay.";
}
</script>
</body>
</html>
使用setInterval()函數在每個時間間隔後執行函數
setTimeOut() 函數只執行回呼函數一次，但 setInterval() 函數在我們作為第二個參數傳遞的每個時間間隔後執行程式碼setInterval()。
文法
使用者可以依照下列語法使用setInterval()函數。
setInterval(callback, interval)
參數
Callback – 這是 setInterval() 函數在每個時間間隔後呼叫的函數。
Interval – 每個時間間隔後呼叫回呼函數的時間（以毫秒為單位）。
傳回值
setInterval()函數也像setTimeout()函數一樣傳回唯一的id，我們可以用它來停止計時器。
範例
在此範例中，我們使用 setInterval() 函數每 1000 毫秒呼叫一次回呼函數。使用者可以觀察到，當按下啟動計時器按鈕時，startInterval() 函數將執行，並呼叫 setInterval() 函數。 setInterval() 函數每秒呼叫一次回呼函數。
<html>
<body>
<h2> Using the <i> setInterval() </i> function </h2>
<div id = "output"> </div>
<button id = "btn" onclick = "startInterval()"> Start Timer </button>
<script>
let output = document.getElementById("output");
let count = 0;
output.innerHTML += "Program execution started </br>";
// when user clicks on the button, startInterval() function will be called
function startInterval() {
output.innerHTML = "The callTimer function executed <br/>";
// the setInterval() function will call the callback function after every second.
setInterval(callback, 1000);
}
function callback() {
output.innerHTML += "This function executed for " + count + " time </br>";
// update the count to track of howmany times a callback is called.
count = count + 1;
}
</script>
</body>
</html>
使用clearTimeOut()和clearInterval()函數來終止計時器
啟動計時器後，我們還需要停止它。我們可以使用clearTimeOut()函數來停止setTimeOut()函數，並使用clearInterval()函數來停止setInterval()函數。
文法
// To stop the setTimeOut() function clearTimeout(TimerId); // To stop the setInterval() function clearInterval(TimerId);
參數
TimerId – 它是由 setTimeOut() 或 setInterval() 函數傳回的唯一 ID。
範例
在下面的範例中，我們使用 setInterval() 計時器函數每秒呼叫函數。此外，我們也追蹤 setInterval() 函數呼叫回呼函數的次數。
在回呼函數中，我們使用 if 語句檢查計數是否大於 3，並使用clearInterval() 函數終止計時器。
<html>
<body>
<h2> Using the <i> clearInterval() </i> function </h2>
<div id = "output"> </div>
<button id = "btn" onclick = "startInterval()"> Start Timer </button>
<script>
let output = document.getElementById("output");
let count = 0;
let TimerId = "";
function startInterval() {
TimerId = setInterval(() => {
output.innerHTML += "count = " + count + "<br/>";
count += 1;
if (count > 3) {
clearInterval(TimerId);
}
}, 1000);
}
</script>
</body>
</html>
在上面的輸出中，使用者可以觀察到它一直印到 count = 3，因為當計數大於 3 時我們就終止了計時器。
以上是解釋 JavaScript 中定時器的工作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！