js实现循环定时
使用 setInterval 实现循环定时
setInterval 是 JavaScript 中用于循环执行指定代码的方法，接收两个参数：回调函数和时间间隔（毫秒）。以下是一个示例：
const intervalId = setInterval(() => {
console.log('定时任务执行');
}, 1000);
// 清除定时器
// clearInterval(intervalId);回调函数会每隔 1000 毫秒（1 秒）执行一次。intervalId 用于后续清除定时器。
使用 setTimeout 模拟循环定时
通过递归调用 setTimeout 可以实现类似 setInterval 的效果，但能更灵活控制每次执行的间隔：
function runTask() {
console.log('定时任务执行');
setTimeout(runTask, 1000);
}
// 启动定时任务
runTask();
// 停止条件示例
// let counter = 0;
// if (counter > 5) return;这种方式适合需要动态调整间隔或条件停止的场景。
使用 requestAnimationFrame 实现高精度定时
对于需要与浏览器渲染帧同步的循环任务（如动画），可以使用 requestAnimationFrame：
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 的任务。
注意事项
- 时间间隔并非绝对精确，受 JavaScript 事件循环影响。
- 清除定时器使用
clearInterval或clearTimeout，避免内存泄漏。 - 高频任务（如 <16ms）建议用
requestAnimationFrame替代setInterval。 - 在 SPA 或组件卸载时需手动清除定时器。
