setTimeout 是我们经常使用的定时器API，它允许我们延迟执行代码。但在实际应用中， setTimeout
存在一些局限性和潜在问题，比如精度不高、在页面不活跃时可能被节流等。分享7种替代方案，让我们的定时任务更加可靠和高效。
1. requestAnimationFrame
requestAnimationFrame 主要用于执行动画，它会在浏览器下一次重绘之前调用指定的回调函数。
function animateWithRAF(timestamp) {
// 执行动画逻辑
requestAnimationFrame(animateWithRAF);
}
requestAnimationFrame(animateWithRAF);
优点：
- 与显示器刷新率同步，通常为60fps
- 在不可见标签页中会暂停，节省资源
- 动画更平滑
2. setInterval + clearInterval
对于需要重复执行的任务， setInterval 比多个 setTimeout 更合适。
const intervalId = setInterval(() => {
console.log("每秒执行一次");
}, 1000);
// 停止定时器
// clearInterval(intervalId);
优点：
- 代码更简洁
- 更适合固定间隔的重复任务
3. requestIdleCallback
当浏览器空闲时执行低优先级任务，避免影响关键操作。
优点：
- 充分利用浏览器空闲时间
- 可以设置超时保证任务最终会执行
- 不阻塞主线程关键操作
4. Web Workers
将耗时任务移至后台线程，避免阻塞主线程。
优点：
- 不阻塞UI线程
- 即使页面不活跃也能继续执行
- 适合计算密集型任务
5. Promise + async/await
用Promise包装setTimeout，结合async/await使异步代码更清晰。
优点：
- 代码更清晰，避免回调地狱
- 更好的错误处理
- 便于链式组合多个异步操作
6. Web Animations API
对于动画效果，Web Animations API提供了更高级的控制。
优点：
- 声明式API，更易于理解
- 内置的暂停、恢复和控制功能
- 比CSS动画和setTimeout更精确
7. Intersection Observer
当元素进入视口时执行代码，比如延迟加载资源或触发动画。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("元素进入视口");
// 执行需要的操作
}
});
});
observer.observe(document.querySelector('.lazy-load'));
优点：
- 无需手动计算元素位置
- 性能更好，避免滚动事件中大量计算
- 适合实现”按需执行”的场景