当前位置：首页 > JavaScript

js实现async延迟

2026-04-07 11:07:12JavaScript

使用 `setTimeout` 封装 Promise

通过 setTimeout 结合 Promise 实现延迟功能。以下是一个简单的异步延迟函数：

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

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

利用 `async/await` 和循环实现分阶段延迟

需要多次延迟时，可以通过循环结合 await 实现分阶段延迟：

async function delayedLog(message, ms, times) {
  for (let i = 0; i < times; i++) {
    await delay(ms);
    console.log(`${message} ${i + 1}`);
  }
}

// 每隔1秒打印一次，共3次
delayedLog('执行:', 1000, 3);

使用 `Promise.race` 实现带超时的延迟

结合 Promise.race 实现带有超时机制的延迟：

function timeoutDelay(ms, timeoutMs) {
  const delayPromise = new Promise(resolve => setTimeout(resolve, ms));
  const timeoutPromise = new Promise((_, reject) => 
    setTimeout(() => reject(new Error('超时')), timeoutMs)
  );

  return Promise.race([delayPromise, timeoutPromise]);
}

// 使用示例
async function example() {
  try {
    await timeoutDelay(3000, 2000); // 延迟3秒，但2秒后超时
  } catch (err) {
    console.error(err.message); // 输出: 超时
  }
}
example();

利用 `AbortController` 实现可取消的延迟

现代浏览器支持通过 AbortController 取消异步操作：

function cancellableDelay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(resolve, ms);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('延迟已取消'));
    });
  });
}

// 使用示例
const controller = new AbortController();

async function example() {
  try {
    console.log('开始');
    await cancellableDelay(3000, controller.signal);
    console.log('结束');
  } catch (err) {
    console.error(err.message);
  }
}

example();
// 取消延迟
setTimeout(() => controller.abort(), 1000); // 1秒后取消

使用生成器函数实现复杂延迟逻辑

通过生成器函数可以创建更复杂的延迟控制流：

js实现async延迟

function* delayedSequence() {
  yield delay(1000);
  console.log('第一步完成');
  yield delay(1500);
  console.log('第二步完成');
  yield delay(500);
  console.log('第三步完成');
}

// 执行生成器
async function runGenerator() {
  const gen = delayedSequence();
  for await (const _ of gen) {
    // 迭代执行每个yield
  }
}
runGenerator();

这些方法覆盖了从基础到高级的异步延迟场景，根据具体需求选择合适实现方式。