当前位置：首页 > JavaScript

js 实现延时执行

2026-03-15 22:34:33JavaScript

使用 setTimeout 实现基础延时

setTimeout 是 JavaScript 中最常用的延时执行方法。它接受一个回调函数和延时时间（毫秒），在指定时间后执行回调。

setTimeout(() => {
  console.log('延时1秒后执行');
}, 1000);

结合 Promise 实现异步延时

通过封装 setTimeout 为 Promise 对象，可以更好地配合 async/await 使用：

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

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

使用 async/await 实现串行延时

在需要连续延时执行的场景下，async/await 能保持代码的线性逻辑：

async function sequentialDelays() {
  await delay(1000);
  console.log('第一步完成');

  await delay(1500);
  console.log('第二步完成');
}

通过 clearTimeout 取消延时

保存 setTimeout 返回的 timer ID，可以在需要时取消未执行的延时：

const timerId = setTimeout(() => {
  console.log('这段代码不会执行');
}, 3000);

clearTimeout(timerId);

递归实现循环延时

替代 setInterval 的方案，通过递归调用实现可控的循环延时：

function repeatWithDelay(fn, delayMs, times) {
  if(times <= 0) return;

  setTimeout(() => {
    fn();
    repeatWithDelay(fn, delayMs, times - 1);
  }, delayMs);
}

浏览器环境下的 requestAnimationFrame

对于需要与屏幕刷新率同步的动画场景，requestAnimationFrame 提供更精确的延时控制：

js 实现延时执行

function delayedAnimation() {
  const start = performance.now();

  function frame(timestamp) {
    const elapsed = timestamp - start;
    if(elapsed < 1000) {
      requestAnimationFrame(frame);
    } else {
      console.log('1秒后执行动画');
    }
  }

  requestAnimationFrame(frame);
}

标签: js