延遲執(zhí)行

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

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

上面的示例會(huì)在 1 秒后執(zhí)行指定的代碼。您可以在代碼中執(zhí)行任何操作，例如顯示警報(bào)、更新 DOM 或執(zhí)行 AJAX 請(qǐng)求。

動(dòng)畫(huà)效果

setTimeout() 函數(shù)還可以用來(lái)創(chuàng)建動(dòng)畫(huà)效果。通過(guò)在代碼中循環(huán)執(zhí)行更新 DOM 的操作，您可以創(chuàng)建流暢的動(dòng)畫(huà)效果。

let position = 0;function move() {// 更新 DOM 以移動(dòng)元素position += 1;if (position < 100) {setTimeout(move, 10); // 每 10 毫秒執(zhí)行一次此函數(shù)}
}move(); // 開(kāi)始動(dòng)畫(huà)

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

利用 Set 集合去重方法

Set 集合是一種數(shù)據(jù)結(jié)構(gòu)，可用于存儲(chǔ)唯一值。這意味著集合中不會(huì)出現(xiàn)重復(fù)的值。

在 JavaScript 中，Set 集合通常用于去重。例如，您可以使用 Set 集合來(lái)移除數(shù)組中的重復(fù)元素。

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

上面的示例創(chuàng)建一個(gè)包含數(shù)組中唯一值的 Set 集合。 `console.log(set)` 會(huì)打印包含唯一值的 Set 集合。

示例：去重動(dòng)畫(huà)中的重復(fù) setTimeout() 調(diào)用

在動(dòng)畫(huà)中，您可能會(huì)遇到重復(fù)調(diào)用 `setTimeout()` 函數(shù)的情況。這可能會(huì)導(dǎo)致性能問(wèn)題，因?yàn)闉g覽器將為每個(gè)調(diào)用創(chuàng)建一個(gè)新的計(jì)時(shí)器。您可以使用 Set 集合來(lái)去重這些調(diào)用，以提高性能。

const timers = new Set();function move() {// 更新 DOM 以移動(dòng)元素position += 1;if (position < 100) {// 使用 Set 集合去重 setTimeout() 調(diào)用const timerId = setTimeout(move, 10);timers.add(timerId);}
}function clearTimers() {for (const timerId of timers) {clearTimeout(timerId);}
}move(); // 開(kāi)始動(dòng)畫(huà)// 在動(dòng)畫(huà)結(jié)束后清除所有計(jì)時(shí)器
setTimeout(clearTimers, 1000); // 1 秒后清除計(jì)時(shí)器

上面的示例使用 Set 集合來(lái)去重 `setTimeout()` 調(diào)用。函數(shù) `move()` 會(huì)更新 DOM 以將元素向右移動(dòng) 1px，然后使用 `setTimeout()` 函數(shù)每 10 毫秒執(zhí)行一次此函數(shù)。但是，這次我們使用 Set 集合來(lái)存儲(chǔ)計(jì)時(shí)器 ID，以確保不會(huì)重復(fù)調(diào)用 `setTimeout()` 函數(shù)。

函數(shù) `clearTimers()` 會(huì)清除 Set 集合中保存的所有計(jì)時(shí)器。我們可以在動(dòng)畫(huà)結(jié)束后調(diào)用此函數(shù)，以確保不會(huì)在動(dòng)畫(huà)完成后繼續(xù)執(zhí)行計(jì)時(shí)器。

結(jié)論

setTimeout() 函數(shù)是一個(gè)強(qiáng)大的工具，可用于實(shí)現(xiàn)延遲執(zhí)行和動(dòng)畫(huà)效果。通過(guò)結(jié)合 Set 集合去重方法，您可以提高動(dòng)畫(huà)的性能并避免重復(fù)的計(jì)時(shí)器調(diào)用。

---

---

相關(guān)標(biāo)簽： 利用、 函數(shù)實(shí)現(xiàn)延遲執(zhí)行和動(dòng)畫(huà)效果、 利用set集合去重方法、 setTimeout、

上一篇：使用setTimeout函數(shù)實(shí)現(xiàn)非阻塞異步編程使用

下一篇：setTimeout函數(shù)的全面指南，包括語(yǔ)法參數(shù)和示