延遲執行

setTimeout() 函數用于延遲執行指定的代碼一段指定的時間。該函數接受兩個參數：要執行的代碼???時間（以毫秒為單位）。

setTimeout(function() {
// 延遲執行的代碼
}, 1000); // 1 秒后執行

上面的示例會在 1 秒后執行指定的代碼。您可以在代碼中執行任何操作，例如顯示警報、更新 DOM 或執行 AJAX 請求。

動畫效果

setTimeout() 函數還可以用來創建動畫效果。通過在代碼中循環執行更新 DOM 的操作，您可以創建流暢的動畫效果。

let position = 0;function move() {// 更新 DOM 以移動元素position += 1;if (position < 100) {setTimeout(move, 10); // 每 10 毫秒執行一次此函數}
}move(); // 開始動畫

上面的示例會創建一個動畫效果，將元素從左側移動到右側。函數 `move()` 會更新 DOM 以將元素向右移動 1px，然后使用 `setTimeout()` 函數每 10 毫秒執行一次此函數。只要 `position` 小于 100（即元素尚未移動到右側），函數就會繼續執行。

利用 Set 集合去重方法

Set 集合是一種數據結構，可用于存儲唯一值。這意味著集合中不會出現重復的值。

在 JavaScript 中，Set 集合通常用于去重。例如，您可以使用 Set 集合來移除數組中的重復元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];const set = new Set(arr);console.log(set); //{1, 2, 3, 4, 5}

上面的示例創建一個包含數組中唯一值的 Set 集合。 `console.log(set)` 會打印包含唯一值的 Set 集合。

示例：去重動畫中的重復 setTimeout() 調用

在動畫中，您可能會遇到重復調用 `setTimeout()` 函數的情況。這可能會導致性能問題，因為瀏覽器將為每個調用創建一個新的計時器。您可以使用 Set 集合來去重這些調用，以提高性能。

const timers = new Set();function move() {// 更新 DOM 以移動元素position += 1;if (position < 100) {// 使用 Set 集合去重 setTimeout() 調用const timerId = setTimeout(move, 10);timers.add(timerId);}
}function clearTimers() {for (const timerId of timers) {clearTimeout(timerId);}
}move(); // 開始動畫// 在動畫結束后清除所有計時器
setTimeout(clearTimers, 1000); // 1 秒后清除計時器

上面的示例使用 Set 集合來去重 `setTimeout()` 調用。函數 `move()` 會更新 DOM 以將元素向右移動 1px，然后使用 `setTimeout()` 函數每 10 毫秒執行一次此函數。但是，這次我們使用 Set 集合來存儲計時器 ID，以確保不會重復調用 `setTimeout()` 函數。

函數 `clearTimers()` 會清除 Set 集合中保存的所有計時器。我們可以在動畫結束后調用此函數，以確保不會在動畫完成后繼續執行計時器。

結論

setTimeout() 函數是一個強大的工具，可用于實現延遲執行和動畫效果。通過結合 Set 集合去重方法，您可以提高動畫的性能并避免重復的計時器調用。

---

---

相關標簽： 利用、 函數實現延遲執行和動畫效果、 利用set集合去重方法、 setTimeout、

上一篇：使用setTimeout函數實現非阻塞異步編程使用

下一篇：setTimeout函數的全面指南，包括語法參數和示