js实现循环定时
使用 setInterval 实现循环定时
const intervalId = setInterval(() => {
console.log('定时执行的任务');
}, 1000); // 每1000毫秒(1秒)执行一次
// 清除定时器
clearInterval(intervalId);
setInterval 会按照指定的时间间隔重复执行回调函数,直到被 clearInterval 清除。
使用 setTimeout 实现循环定时
function loopWithTimeout() {
console.log('定时执行的任务');
setTimeout(loopWithTimeout, 1000); // 1秒后再次执行
}
loopWithTimeout(); // 启动循环
这种方法通过递归调用 setTimeout 实现循环效果,相比 setInterval 能更精确控制每次执行的间隔。

使用 requestAnimationFrame 实现循环
function loopWithRAF() {
console.log('动画帧循环');
requestAnimationFrame(loopWithRAF);
}
loopWithRAF();
requestAnimationFrame 通常用于动画循环,会与浏览器刷新率同步(通常60fps),适合需要流畅动画的场景。
使用 async/await 实现可控循环
async function asyncLoop() {
while(true) {
console.log('异步循环任务');
await new Promise(resolve => setTimeout(resolve, 1000));
}
}
asyncLoop();
这种方法结合了异步函数和 Promise,可以方便地控制循环流程和错误处理。

注意事项
定时器的时间间隔是预期的最小延迟,实际执行时间可能因主线程繁忙而延后。
循环定时任务应考虑性能影响,在不需要时及时清除定时器避免内存泄漏。
requestAnimationFrame 不适合需要固定时间间隔的场景,因为它依赖于浏览器刷新率。






