当前位置：首页 > JavaScript

js实现间隔

2026-02-01 18:41:03JavaScript

使用 setTimeout 实现间隔

setTimeout 是 JavaScript 中用于在指定时间后执行一次代码的函数。通过递归调用 setTimeout 可以实现间隔执行的效果。

function repeatFunction() {
  console.log('This will run every 2 seconds');
  setTimeout(repeatFunction, 2000);
}

setTimeout(repeatFunction, 2000);

使用 setInterval 实现间隔

setInterval 是专门用于间隔执行的函数，它会按照指定的时间间隔重复执行代码。

js实现间隔

setInterval(function() {
  console.log('This will run every 1 second');
}, 1000);

使用 async/await 实现间隔

在异步函数中可以使用 Promise 和 setTimeout 结合来实现间隔执行。

async function delayedLoop() {
  while(true) {
    console.log('Running every 3 seconds');
    await new Promise(resolve => setTimeout(resolve, 3000));
  }
}

delayedLoop();

使用 requestAnimationFrame 实现间隔

requestAnimationFrame 更适合需要与屏幕刷新率同步的间隔执行，通常用于动画。

js实现间隔

function animate() {
  console.log('Running at screen refresh rate');
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

清除间隔执行

对于 setInterval 和 setTimeout 创建的间隔执行，需要使用 clearInterval 和 clearTimeout 来清除。

const intervalId = setInterval(() => {
  console.log('This will stop after 5 seconds');
}, 1000);

setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

使用 Generator 函数实现间隔

Generator 函数可以配合 yield 实现更灵活的间隔控制。

function* intervalGenerator() {
  while(true) {
    yield new Promise(resolve => setTimeout(resolve, 1500));
    console.log('Running every 1.5 seconds');
  }
}

const gen = intervalGenerator();
function run() {
  gen.next().value.then(run);
}
run();