如何为排序可视化器的异步函数实现无卡顿的暂停/继续功能？

你的问题出在while(isTrue){}这个同步死循环上——它会彻底阻塞JavaScript的事件循环，浏览器无法处理UI渲染、用户点击等任何任务，自然就会出现页面无响应的情况。

正确实现方式 #

改用异步等待替代同步循环，同时确保能获取到最新的暂停状态，具体步骤如下：

1. 替换同步暂停逻辑为异步等待函数 #

写一个异步函数，通过setTimeout让出事件循环，轮询检查暂停状态，这样不会阻塞浏览器：

2. 修改排序函数的参数与逻辑 #

不要直接传递isTrue状态，而是传递一个获取最新状态的函数，避免异步执行过程中捕获旧的状态值；同时在排序的关键节点插入暂停检查：

import asyncSetTimeout from '../helpers/asyncSetTimeout';

const bubbleSort = async ({
  array,
  setArray,
  setColorsArray,
  visualizationSpeed,
  setI,
  setJ,
  setNum1,
  setNum2,
  comparisons,
  setComparisons,
  swaps,
  setswaps,
  getIsPaused // 改为获取最新暂停状态的函数
} = {}) => {
  comparisons = 0;
  swaps = 0;
  let len = array.length;

  // 异步等待函数：直到暂停状态解除
  const waitUntilResumed = async () => {
    while (getIsPaused()) {
      // 每50ms检查一次，同时让出事件循环给浏览器
      await new Promise(resolve => setTimeout(resolve, 50));
    }
  };

  for (let i = 0; i < len - 1; i++) {
    // 外层循环开始前检查是否暂停
    await waitUntilResumed();
    setI(i);
    
    for (let j = 0; j < len - 1 - i; j++) {
      // 内层循环开始前检查是否暂停
      await waitUntilResumed();
      setJ(j);
      
      let newColorsArray = new Array(len).fill(0);
      newColorsArray[len - 1 - i] = 3;
      newColorsArray[j] = 1;
      newColorsArray[j + 1] = 2;
      setColorsArray(newColorsArray);

      await asyncSetTimeout({
        timeout: 10 * visualizationSpeed
      });

      setNum1(array[j]);
      setNum2(array[j + 1]);
      comparisons++;
      setComparisons(comparisons);

      if (array[j + 1] < array[j]) {
        let temp = array[j + 1];
        array[j + 1] = array[j];
        array[j] = temp;
        swaps++;
        setswaps(swaps);
        setArray([...array]); // 传递新数组，确保React检测到变化
      }

      await asyncSetTimeout({
        timeout: 10 * visualizationSpeed
      });

      // 当前步操作完成后检查是否暂停
      await waitUntilResumed();
    }
  }
  setColorsArray([]);
};

export default bubbleSort;

3. 组件中调用排序函数时传入状态获取函数 #

在你的React组件中，调用bubbleSort时传入获取最新暂停状态的函数：

const [isPaused, setIsPaused] = useState(false);

// 触发排序时
bubbleSort({
  // 其他必要参数...
  getIsPaused: () => isPaused
});

关键改进点说明 #

• 避免阻塞事件循环：异步等待通过setTimeout让浏览器有机会处理UI更新和用户交互，不会出现页面卡死。
• 获取最新状态：用函数getIsPaused()替代直接传递isTrue，确保每次检查时拿到的都是最新的暂停状态（因为React的useState更新是异步的，异步函数会捕获变量的旧值）。
• 正确触发React更新：setArray([...array])创建新数组，确保React能检测到数组变化并重新渲染可视化内容。

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