setTimeout 有什么缺点？setTimeout 和 requestAnimationFrame 之间有什么区别？

setTimeout 的缺点

setTimeout 函数是 Web API 的一部分，它可以在指定的毫秒数后执行一个函数或指定的代码。然而，setTimeout 有几个缺点：

1. 不精确的时间控制: setTimeout 并不能保证在指定时间后立即执行，因为它受到 JavaScript 事件循环的影响。如果事件队列中有其他任务，setTimeout 的回调可能会延迟执行。
2. 性能问题: 使用 setTimeout 进行重复的或高频的任务（例如动画）可能会导致性能问题。因为它不会考虑浏览器的绘制帧。这可能会导致动画不流畅或者页面重绘。
3. 多个定时器的管理: 如果页面上有多个 setTimeout 定时器，管理和清除这些定时器可能会变得复杂。
4. 资源消耗: 即使浏览器窗口或页面不在前台时，setTimeout 也会继续执行，这可能会导致不必要的 CPU 和电力消耗。

setTimeout 与 requestAnimationFrame 的区别

setTimeout 和 requestAnimationFrame（简称 rAF）都可以用于延迟执行代码，但它们的用途和行为有显著的区别：

1. 目的:

   • setTimeout 用于在设定的时间后执行一次回调函数。
   • requestAnimationFrame 主要用于动画，它告诉浏览器在下次重绘之前执行一个函数，以便动画可以平滑地按照屏幕的刷新率运行。

2. 执行时机:

   • setTimeout 的回调执行时间不一定与浏览器的绘制帧同步。
   • requestAnimationFrame 的回调会在浏览器绘制下一帧之前执行，这通常意味着回调以 60 次/秒的频率执行（或者与显示器的刷新率相匹配）。

3. 性能:

   • setTimeout 可能会导致掉帧，因为它不考虑浏览器的帧率。
   • requestAnimationFrame 会与浏览器的帧率同步，减少掉帧的情况，因此动画更平滑，性能也更优。

4. 节能:

   • setTimeout 在后台标签页或隐藏的 iframe 中仍然会运行，可能导致不必要的资源消耗。
   • requestAnimationFrame 在页面不可见时会自动暂停，从而节省资源。

5. 使用场景:

   • setTimeout 适用于不需要与帧率同步的一次性或非频繁的延迟任务。
   • requestAnimationFrame 适用于需要高性能动画的场景，例如游戏或界面动效。