当前位置：首页 > JavaScript

js异步实现暂停

2026-04-07 07:09:32JavaScript

异步暂停的实现方法

在JavaScript中实现异步操作的暂停功能，可以通过以下几种方式实现：

Promise与async/await结合

使用async/await语法可以更直观地控制异步流程的暂停。通过返回一个在指定时间后resolve的Promise来实现暂停效果。

js异步实现暂停

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

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

Generator函数

通过Generator函数的yield关键字可以实现执行流程的暂停和恢复。

js异步实现暂停

function* pausedTask() {
  console.log('第一步');
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('第二步');
}

const generator = pausedTask();
generator.next().value.then(() => generator.next());

AbortController

现代浏览器支持的AbortController可以用于中断异步操作。

const controller = new AbortController();

fetch(url, { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求被中止');
    }
  });

// 需要暂停时调用
controller.abort();

手动控制状态

通过标志变量手动控制异步流程的暂停和继续。

let isPaused = false;

async function controllableTask() {
  while(true) {
    if(isPaused) {
      await new Promise(resolve => {
        const check = () => {
          if(!isPaused) resolve();
          else setTimeout(check, 100);
        };
        check();
      });
    }
    // 正常业务逻辑
  }
}

每种方法适用于不同场景，Promise方案适合简单延迟，Generator适合复杂流程控制，AbortController适合需要取消的场景，手动控制则提供了最大灵活性。

标签: js