让定时任务更可靠的7个代替setTimeout的方案

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

当浏览器空闲时执行低优先级任务，避免影响关键操作。

requestIdlecallback((deadline) => {
    if (deadline.timeRemaining() > 0) {
        // 执行非关键任务
    }
}, {timeout: 2000});

优点：

• 充分利用浏览器空闲时间；
• 可以设置超时保证任务最终会执行；
• 不阻塞主线程关键操作。

4. Web Workers

将耗时任务移至后台线程，避免阻塞主线程。

// main.js
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
    console.log('收到 Worker 消息:', event.data);
};
// worker.js
setInterval(() => {
    postMessage('定时任务完成');
}, 1000);

优点：

• 不阻塞 UI 线程；
• 即使页面不活跃也能继续执行；
• 适合计算密集型任务。

5. Promise + async/await

用 Promise 包装 setTimeout，结合 async/await 使异步代码更清晰。

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedTask() {
    console.log("开始");
    await delay(2000);
    console.log("2 秒后");
}
delayedTask();

优点：

• 代码更清晰，避免回调地狱；
• 更好的错误处理；
• 便于链式组合多个异步操作。

6. Web Animations API

对于动画效果，Web Animations API 提供了更高级的控制。

const element = document.querySelector('.box');
const animation = element.animate([
    { transform: 'translateX(0)' },
    { transform: 'translateX(300px)' }
], {
    duration: 1000,
    fill: 'forwards'
});
animation.onfinish = () => console.log("动画完成");

优点：

• 声明式 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'));

优点：

• 无需手动计算元素位置；
• 性能更好，避免滚动事件中大量计算；
• 适合实现”按需执行”的场景。

以上关于让定时任务更可靠的7个代替setTimeout的方案的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。