暂停和取消暂停此异步功能
我有一个用于排序可视化工具的异步函数。我想添加一个暂停和取消暂停的功能。我尝试使用
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
关键字的函数来暂停排序算法的执行。修改代码的方法如下:
在保持暂停状态的父组件中添加一个新的
。例如,你可以称它为useState
和对应的setterisPaused
.setIsPaused
将
和isPaused
作为附加参数传递给setIsPaused
函数。bubbleSort
在
函数中创建一个名为waitForUnpause
的新异步函数。这个函数会在暂停状态改变时解析:bubbleSort
const waitForUnpause = async () => {
return new Promise((resolve) => {
const checkPausedState = () => {
if (!isPaused) {
resolve();
} else {
setTimeout(checkPausedState, 100);
}
};
checkPausedState();
});
};
- 将
行替换为while(isTrue){}
:await waitForUnpause();
await waitForUnpause();
这样,当
isPaused
为真时,您的排序算法将暂停执行,并且不会导致页面无响应。当您想取消暂停算法时,只需使用 isPaused
函数将 false
设置为 setIsPaused
,排序算法将继续执行。