利用 setTimeout() 函数实现延迟执行和动画效果 (利用set集合去重方法)

延迟执行

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函数的全面指南，包括语法参数和示