JavaScript 提供了多種處理定時事件的方法，其中最常用的兩個方法是 setTimeout 和 setInterval。這些函數可讓您安排程式碼在指定時間後執行或定期重複執行。在本文中，我們將探討這些函數的工作原理，並提供實際範例來說明它們的用法。
setTimeout 函數用於在指定的延遲後執行一次函數或一段程式碼。 setTimeout 的語法如下：
setTimeout(function, delay, [arg1, arg2, ...]);
function sayHello() {
console.log('Hello, World!');
}
setTimeout(sayHello, 2000); // Outputs "Hello, World!" after 2 seconds
在此範例中，sayHello 函數在 2 秒延遲後執行一次。
function greet(name) {
console.log('Hello, ' + name + '!');
}
setTimeout(greet, 2000, 'Alice'); // Outputs "Hello, Alice!" after 2 seconds
在這裡，我們將參數「Alice」傳遞給greet函數，該函數在2秒延遲後執行。
setTimeout(function() {
console.log('This is an anonymous function!');
}, 3000); // Outputs "This is an anonymous function!" after 3 seconds
您也可以直接在 setTimeout 中使用匿名函數。
setInterval 函數用於以指定的時間間隔重複執行一個函數或一段程式碼。 setInterval 的語法與 setTimeout 類似：
setInterval(function, interval, [arg1, arg2, ...]);
function sayHello() {
console.log('Hello, World!');
}
setInterval(sayHello, 1000); // Outputs "Hello, World!" every 1 second
在此範例中，sayHello 函數每秒執行一次。
function greet(name) {
console.log('Hello, ' + name + '!');
}
setInterval(greet, 1000, 'Alice'); // Outputs "Hello, Alice!" every 1 second
在這裡，我們將參數「Alice」傳遞給greet函數，該函數每秒執行一次。
setInterval(function() {
console.log('This is an anonymous function!');
}, 2000); // Outputs "This is an anonymous function!" every 2 seconds
您也可以直接在 setInterval 中使用匿名函數。
setTimeout 和 setInterval 都會傳回一個計時器 ID，如果需要，可以使用該 ID 來清除計時器。這是分別使用clearTimeout 和clearInterval 函數完成的。
const timeoutId = setTimeout(function() {
console.log('This will not run.');
}, 5000);
clearTimeout(timeoutId); // Cancels the timeout
const intervalId = setInterval(function() {
console.log('This will run only once.');
}, 1000);
setTimeout(function() {
clearInterval(intervalId); // Stops the interval after 3 seconds
}, 3000);
在此範例中，clearInterval 函數在 3 秒後被調用，停止該函數的重複執行。
去抖動是一種限制函數執行速率的技術。例如，您可以使用 setTimeout 來消除搜尋輸入欄位的抖動：
let timeoutId;
function debounceSearch(query) {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
// Perform search operation
console.log('Searching for:', query);
}, 300);
}
document.getElementById('searchInput').addEventListener('input', function(event) {
debounceSearch(event.target.value);
});
let seconds = 0;
function updateTimer() {
seconds++;
console.log('Timer:', seconds);
}
const timerId = setInterval(updateTimer, 1000);
// Stop the timer after 10 seconds
setTimeout(function() {
clearInterval(timerId);
console.log('Timer stopped');
}, 10000);
理解 setTimeout 和 setInterval 對於管理 JavaScript 中的定時和重複操作至關重要。這些函數使您能夠處理諸如消除使用者輸入抖動、建立計時器和運行定期更新等任務。透過掌握這些工具，您可以建立快速回應、更有效率的 Web 應用程式。
以上是了解 JavaScript 中的'setTimeout”和'setInterval”的詳細內容。更多資訊請關注PHP中文網其他相關文章！
