当前位置：首页 > JavaScript

js实现循环定时

2026-02-02 20:30:52JavaScript

使用 setInterval 实现循环定时

// 每隔1秒执行一次
const intervalId = setInterval(() => {
  console.log('定时执行');
}, 1000);

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

setInterval 会持续重复执行回调函数，直到被 clearInterval 清除。第一个参数是回调函数，第二个参数是间隔时间（毫秒）。

使用 setTimeout 模拟循环定时

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

// 启动循环
delayedLoop();

通过递归调用 setTimeout 可以实现类似 setInterval 的效果，但每次执行间隔会更准确，因为它会等待当前任务完成后再计算下一次执行时间。

使用 requestAnimationFrame 实现动画循环

function animate() {
  console.log('动画帧');
  requestAnimationFrame(animate);
}

// 启动动画循环
requestAnimationFrame(animate);

requestAnimationFrame 更适合动画场景，浏览器会在每次重绘前执行回调，通常每秒60次左右。

带条件的循环定时

let count = 0;
const maxCount = 5;

const intervalId = setInterval(() => {
  console.log(`执行第 ${++count} 次`);
  if(count >= maxCount) {
    clearInterval(intervalId);
    console.log('循环结束');
  }
}, 1000);

可以添加条件判断来终止循环，避免无限执行。

异步任务循环定时

async function asyncLoop() {
  while(true) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('异步定时执行');
    // 添加退出条件
  }
}

asyncLoop();

使用 async/await 结合 Promise 可以实现包含异步操作的循环定时。

性能优化的循环定时

let lastTime = 0;
const fps = 30;
const interval = 1000 / fps;

function gameLoop(timestamp) {
  if(timestamp - lastTime >= interval) {
    lastTime = timestamp;
    console.log('游戏逻辑更新');
  }
  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

对于游戏等高性能要求的场景，可以结合时间戳控制实际执行频率，避免不必要的执行。

js实现循环定时