当前位置：首页 > JavaScript

js实现延迟

2026-01-13 14:15:17JavaScript

实现延迟的方法

在JavaScript中，实现延迟操作有多种方式，以下是几种常见的方法：

使用setTimeout函数

setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回调函数和延迟时间（毫秒）作为参数。

setTimeout(() => {
  console.log('这段代码将在3秒后执行');
}, 3000);

使用async/await配合Promise

通过创建一个返回Promise的函数，结合async/await语法可以实现更清晰的延迟逻辑。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedFunction() {
  console.log('开始');
  await delay(2000);
  console.log('2秒后执行');
}

使用setInterval实现周期性延迟

如果需要周期性执行某个操作，可以使用setInterval函数。

let counter = 0;
const intervalId = setInterval(() => {
  console.log(`第${++counter}次执行`);
  if(counter >= 5) clearInterval(intervalId);
}, 1000);

使用requestAnimationFrame

对于需要与浏览器渲染同步的延迟操作，requestAnimationFrame是更好的选择。

function delayedAnimation() {
  let start = null;
  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    if (progress < 2000) {
      requestAnimationFrame(step);
    } else {
      console.log('2秒后执行的动画操作');
    }
  }
  requestAnimationFrame(step);
}

使用Generator函数

通过Generator函数可以实现更复杂的延迟控制逻辑。

function* delayedGenerator() {
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('1秒后执行');
  yield new Promise(resolve => setTimeout(resolve, 2000));
  console.log('再2秒后执行');
}

const gen = delayedGenerator();
gen.next().value.then(() => gen.next());

每种方法适用于不同的场景，setTimeout适合简单的延迟操作，Promise和async/await适合处理异步流程，setInterval适合周期性任务，requestAnimationFrame适合动画相关的延迟，Generator适合复杂的控制流程。

js实现延迟