当前位置：首页 > JavaScript

js异步实现暂停

2026-03-15 13:44:21JavaScript

异步暂停的实现方法

在JavaScript中实现异步操作的暂停可以通过多种方式完成，以下是几种常见的方法：

使用Promise和setTimeout

通过结合Promise和setTimeout可以模拟异步暂停的效果。创建一个返回Promise的函数，利用setTimeout在指定时间后resolve。

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

async function demo() {
  console.log('开始');
  await sleep(2000); // 暂停2秒
  console.log('结束');
}
demo();

使用Generator函数

Generator函数可以通过yield关键字暂停执行，适合需要更精细控制异步流程的场景。

function* asyncTask() {
  console.log('步骤1');
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('步骤2');
}

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

使用async/await与条件判断

结合async/await和条件变量可以实现基于条件的暂停，适用于需要等待特定条件满足的场景。

let isPaused = false;

async function run() {
  while (true) {
    if (isPaused) {
      await new Promise(resolve => setTimeout(resolve, 100));
      continue;
    }
    console.log('运行中');
    await sleep(500);
  }
}

// 外部控制
setTimeout(() => { isPaused = true; }, 2000);
setTimeout(() => { isPaused = false; }, 4000);
run();

使用AbortController

对于需要取消的异步操作，AbortController提供了一种标准的中断机制，适合fetch请求等场景。

js异步实现暂停

const controller = new AbortController();
const signal = controller.signal;

async function fetchData() {
  try {
    const response = await fetch('url', { signal });
    console.log(await response.json());
  } catch (e) {
    if (e.name === 'AbortError') {
      console.log('请求已中止');
    }
  }
}

// 中止请求
setTimeout(() => controller.abort(), 1000);
fetchData();