了解 JavaScript 中的'setTimeout”和'setInterval”

JavaScript 提供了多種處理定時事件的方法，其中最常用的兩個方法是 setTimeout 和 setInterval。這些函數可讓您安排程式碼在指定時間後執行或定期重複執行。在本文中，我們將探討這些函數的工作原理，並提供實際範例來說明它們的用法。

設定超時時間

setTimeout 函數用於在指定的延遲後執行一次函數或一段程式碼。 setTimeout 的語法如下：

setTimeout(function, delay, [arg1, arg2, ...]);

• function：要執行的函數或程式碼。
• 延遲：執行函數之前等待的時間（以毫秒為單位）。
• [arg1, arg2, ...]：執行時傳遞給函數的可選參數。

範例 1：基本用法

function sayHello() {
  console.log('Hello, World!');
}

setTimeout(sayHello, 2000); // Outputs "Hello, World!" after 2 seconds

在此範例中，sayHello 函數在 2 秒延遲後執行一次。

範例 2：傳遞參數

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setTimeout(greet, 2000, 'Alice'); // Outputs "Hello, Alice!" after 2 seconds

在這裡，我們將參數「Alice」傳遞給greet函數，該函數在2秒延遲後執行。

範例 3：使用匿名函數

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：要執行的函數或程式碼。
• 間隔：每次執行之間的時間（以毫秒為單位）。
• [arg1, arg2, ...]：每次執行時傳遞給函數的可選參數。

範例 1：基本用法

function sayHello() {
  console.log('Hello, World!');
}

setInterval(sayHello, 1000); // Outputs "Hello, World!" every 1 second

在此範例中，sayHello 函數每秒執行一次。

範例 2：傳遞參數

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setInterval(greet, 1000, 'Alice'); // Outputs "Hello, Alice!" every 1 second

在這裡，我們將參數「Alice」傳遞給greet函數，該函數每秒執行一次。

範例 3：使用匿名函數

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 函數完成的。

範例：清除 setTimeout

const timeoutId = setTimeout(function() {
  console.log('This will not run.');
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

範例：清除 setInterval

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 秒後被調用，停止該函數的重複執行。

實際用例

1.使用setTimeout去發抖

去抖動是一種限制函數執行速率的技術。例如，您可以使用 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);
});

2. 使用 setInterval 建立一個簡單的計時器

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中文網其他相關文章！