当前位置：首页 > JavaScript

js实现延时

2026-02-01 07:12:49JavaScript

使用 setTimeout 实现延时

JavaScript 中 setTimeout 是最常用的延时方法，用于在指定时间后执行回调函数。语法如下：

setTimeout(callback, delayInMilliseconds, [arg1, arg2, ...]);

示例代码：

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

结合 Promise 实现异步延时

通过封装 setTimeout 为 Promise，可以更方便地在异步流程中使用延时：

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

// 使用示例
async function demo() {
  console.log('开始');
  await delay(3000); // 等待3秒
  console.log('结束');
}

使用 async/await 处理延时链

在需要连续延时的场景中，async/await 能保持代码可读性：

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

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

取消延时执行

通过 clearTimeout 可以取消尚未执行的延时操作：

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

clearTimeout(timerId);

递归实现间隔延时

需要重复延时执行时，可采用递归方式：

function repeatWithDelay(callback, interval, times) {
  if (times <= 0) return;

  setTimeout(() => {
    callback();
    repeatWithDelay(callback, interval, times - 1);
  }, interval);
}

// 每1秒执行一次，共3次
repeatWithDelay(() => console.log('执行'), 1000, 3);

浏览器动画帧延时

对于需要与屏幕刷新率同步的延时，可使用 requestAnimationFrame：

js实现延时

function frameDelay(callback) {
  let start = performance.now();

  function checkTime(timestamp) {
    if (timestamp - start >= 1000) { // 延时1秒
      callback();
    } else {
      requestAnimationFrame(checkTime);
    }
  }

  requestAnimationFrame(checkTime);
}

标签: js