当前位置：首页 > JavaScript

js实现循环定时

2026-04-07 14:16:10JavaScript

使用 `setInterval` 实现循环定时

setInterval 是 JavaScript 中用于循环执行指定代码的方法，接收两个参数：回调函数和时间间隔（毫秒）。以下是一个示例：

const intervalId = setInterval(() => {
  console.log('定时任务执行');
}, 1000);

// 清除定时器
// clearInterval(intervalId);

回调函数会每隔 1000 毫秒（1 秒）执行一次。intervalId 用于后续清除定时器。

使用 `setTimeout` 模拟循环定时

通过递归调用 setTimeout 可以实现类似 setInterval 的效果，但能更灵活控制每次执行的间隔：

js实现循环定时

function runTask() {
  console.log('定时任务执行');
  setTimeout(runTask, 1000);
}

// 启动定时任务
runTask();

// 停止条件示例
// let counter = 0;
// if (counter > 5) return;

这种方式适合需要动态调整间隔或条件停止的场景。

使用 `requestAnimationFrame` 实现高精度定时

对于需要与浏览器渲染帧同步的循环任务（如动画），可以使用 requestAnimationFrame：

js实现循环定时

function animate() {
  console.log('执行动画帧任务');
  requestAnimationFrame(animate);
}

// 启动动画
animate();

默认执行频率与浏览器刷新率（通常 60Hz）一致，可通过计算时间差手动控制间隔。

使用 `Web Worker` 实现后台线程定时

为避免主线程阻塞，可将定时任务交给 Web Worker：

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ interval: 1000 });

// worker.js
self.onmessage = (e) => {
  setInterval(() => {
    self.postMessage('任务执行');
  }, e.data.interval);
};

适合需要长时间运行且不干扰 UI 的任务。