如何在JavaScript中实现函数的暂停与恢复？——为BFS函数添加启停控制按钮的方法

当然可行！不过你的原始BFS是同步阻塞式的函数——一旦运行起来，浏览器主线程会被完全占用，根本没法响应按钮点击事件。所以要实现暂停/恢复，得先把BFS改成可中断的异步版本，再配合状态控制逻辑。

先提个小细节：你的原始代码里有个笔误——queue.lenght应该写成queue.length，不然循环根本不会执行哦😉

核心思路 #

• 将BFS拆分为分步执行的异步任务，每执行一小步就交出主线程控制权，让浏览器能响应按钮点击
• 维护全局状态变量，记录当前是否处于暂停状态、BFS的执行上下文（比如当前队列、已访问节点、迭代进度）
• 给按钮绑定点击事件，切换暂停状态，控制BFS的继续/暂停

完整实现代码 #

HTML部分

<button id="toggleBtn">暂停BFS</button>

JavaScript部分

// 状态变量：控制暂停/恢复，存储BFS执行上下文
let isPaused = false;
let bfsIterator = null;
let currentQueue = [];
let visited = [];

// 第一步：将BFS改造成生成器函数，每一步都可以暂停
function* bfsGenerator(graph, start) {
  currentQueue = [start];
  visited = [];
  visited[start] = true;

  while (currentQueue.length > 0) {
    // 每次循环前检查是否暂停，如果暂停就yield等待恢复
    while (isPaused) {
      yield;
    }

    const node = currentQueue.shift();
    console.log(`访问节点: ${node}`); // 这里可以替换成你的业务逻辑

    // 遍历当前节点的邻接节点
    for (let i = 0; i < graph[node].length; i++) {
      // 同样，每次迭代前检查暂停状态
      while (isPaused) {
        yield;
      }

      if (graph[node][i] && !visited[i]) {
        visited[i] = true;
        currentQueue.push(i);
        yield; // 每处理一个邻接节点就暂停一次，方便控制节奏
      }
    }
  }

  console.log("BFS遍历完成！");
}

// 第二步：驱动生成器执行的函数
async function runBFS(graph, start) {
  bfsIterator = bfsGenerator(graph, start);
  let result = bfsIterator.next();
  
  while (!result.done) {
    // 用setTimeout让出主线程，让浏览器能处理按钮点击
    await new Promise(resolve => setTimeout(resolve, 0));
    result = bfsIterator.next();
  }
}

// 第三步：绑定按钮的暂停/恢复事件
document.getElementById('toggleBtn').addEventListener('click', () => {
  isPaused = !isPaused;
  document.getElementById('toggleBtn').textContent = isPaused ? "恢复BFS" : "暂停BFS";
});

// 测试用例：一个简单的图结构
const testGraph = [
  [0, 1, 1, 0],
  [1, 0, 0, 1],
  [1, 0, 0, 1],
  [0, 1, 1, 0]
];

// 启动BFS
runBFS(testGraph, 0);

代码解释 #

• 生成器函数bfsGenerator：把BFS的每一步拆分成可暂停的片段，通过yield关键字让出执行权，当isPaused为true时，会一直停在yield处等待恢复。
• runBFS函数：用async/await配合setTimeout驱动生成器，每次迭代都让出主线程，确保按钮点击事件能被响应。
• 状态控制：isPaused变量控制暂停状态，点击按钮时切换该变量的值，生成器会在下次检查时自动暂停/继续。

可选优化 #

• 如果需要更精细的控制（比如单步执行），可以在yield处返回当前节点信息，配合按钮实现单步调试。
• 可以把状态变量封装成模块级变量，避免污染全局作用域。

内容的提问来源于stack exchange，提问作者Ayman Tarig