当前位置：首页 > JavaScript

js实现async延迟

2026-02-02 17:25:45JavaScript

使用 `setTimeout` 封装 Promise 实现延迟

在 JavaScript 中，可以通过 setTimeout 结合 Promise 实现异步延迟。以下是一个简单的实现方式：

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

// 使用示例
async function example() {
  console.log('开始');
  await delay(2000); // 延迟2秒
  console.log('2秒后');
}

使用 `async/await` 结合循环实现精确延迟

如果需要更精确的延迟控制，可以使用循环检查时间差：

js实现async延迟

async function preciseDelay(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

取消延迟的功能实现

通过 AbortController 可以实现可取消的延迟：

js实现async延迟

function cancellableDelay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(resolve, ms);
    signal.addEventListener('abort', () => {
      clearTimeout(timeout);
      reject(new Error('Delay cancelled'));
    });
  });
}

// 使用示例
const controller = new AbortController();
cancellableDelay(2000, controller.signal)
  .then(() => console.log('完成'))
  .catch(e => console.log(e.message));

// 取消延迟
controller.abort();

批量延迟任务处理

对于多个需要延迟执行的任务，可以使用 Promise.all：

async function batchDelays() {
  const delays = [
    delay(1000).then(() => console.log('任务1')),
    delay(1500).then(() => console.log('任务2')),
    delay(500).then(() => console.log('任务3'))
  ];

  await Promise.all(delays);
  console.log('所有延迟任务完成');
}

动态延迟时间计算

根据条件动态计算延迟时间：

async function dynamicDelay(baseMs, factor) {
  const actualDelay = baseMs * factor;
  await delay(actualDelay);
  console.log(`延迟了${actualDelay}ms`);
}

这些方法提供了不同场景下的异步延迟实现方案，可以根据具体需求选择合适的方式。