暂停和取消暂停此异步功能

功能"/>

暂停和取消暂停此异步功能

我有一个用于排序可视化工具的异步函数。我想添加一个暂停和取消暂停的功能。我尝试使用

while(isTrue){}

（

isTrue

是一个 usestate 变量），但此方法使页面无响应。有没有更好的方法来添加这个功能？

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

const bubbleSort = async ({
  array,
  setArray,
  setColorsArray,
  visualizationSpeed,
  setI,
  setJ,
  setNum1,
  setNum2,
  comparisons,
  setComparisons,
  swaps,
  setswaps,
  isTrue
} = {}) => {
  comparisons=0;
  swaps=0;
  let date1 = new Date();
  let len = array.length;
  for (let i = 0; i < len - 1; i++) {
    setI(i);
    for (let j = 0; j < len - 1 - i; j++) {
      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);
      }
      await asyncSetTimeout({
        timeout: 10 * visualizationSpeed
      })
      console.log(isTrue)
      while(isTrue){}
      console.log(isTrue);
    }
  }
  let date2 = new Date();
  console.log(date2-date1-(comparisons*10*visualizationSpeed)-(swaps*10*visualizationSpeed),"ms")
  setColorsArray([])
};

export default bubbleSort;

回答如下：

您可以通过创建一个新的异步函数来添加暂停和取消暂停功能，该异步函数在暂停状态更改时解析。除了使用 while 循环，您还可以使用带有

await

关键字的函数来暂停排序算法的执行。修改代码的方法如下：

1. 在保持暂停状态的父组件中添加一个新的

   useState

   。例如，你可以称它为

   isPaused

   和对应的setter

   setIsPaused

   .

2. 将

   isPaused

   和

   setIsPaused

   作为附加参数传递给

   bubbleSort

   函数。

3. 在

   waitForUnpause

   函数中创建一个名为

   bubbleSort

   的新异步函数。这个函数会在暂停状态改变时解析：

const waitForUnpause = async () => {
  return new Promise((resolve) => {
    const checkPausedState = () => {
      if (!isPaused) {
        resolve();
      } else {
        setTimeout(checkPausedState, 100);
      }
    };
    checkPausedState();
  });
};

4. 将

   while(isTrue){}

   行替换为

   await waitForUnpause();

   ：

await waitForUnpause();

这样，当

isPaused

为真时，您的排序算法将暂停执行，并且不会导致页面无响应。当您想取消暂停算法时，只需使用

isPaused

函数将

false

设置为

setIsPaused

，排序算法将继续执行。