Javascript 快速排序可视化(JS/React)-为什么某些值保持不变
我试图使排序算法可视化,并出现一些问题与快速排序可视化。重点是什么?当我在没有动画的情况下测试它(仅交换数组索引和更改数组状态(React))时,一切都很好,但当我添加动画函数时,一些值进入交换条件,但保持未交换状态 代码如下:Javascript 快速排序可视化(JS/React)-为什么某些值保持不变,javascript,reactjs,algorithm,sorting,quicksort,Javascript,Reactjs,Algorithm,Sorting,Quicksort,我试图使排序算法可视化,并出现一些问题与快速排序可视化。重点是什么?当我在没有动画的情况下测试它(仅交换数组索引和更改数组状态(React))时,一切都很好,但当我添加动画函数时,一些值进入交换条件,但保持未交换状态 代码如下: function swap(el1, el2) { const container = document.getElementsByClassName('array-container'); return new Promise(resolve =>
function swap(el1, el2) {
const container = document.getElementsByClassName('array-container');
return new Promise(resolve => {
// Wait for the transition to end!
window.requestAnimationFrame(function() {
setTimeout(() => {
container[0].insertBefore(el2, el1);
resolve();
}, 15);
});
});
}
export const quickSort = async (arr, left=0, right=arr.length - 1) => {
if( left < right ) {
let pivotIndex = await pivot(arr, left, right);
await Promise.all([
quickSort(arr, left, pivotIndex - 1),
quickSort(arr, pivotIndex + 1, right)
]);
}
return arr;
}
async function pivot(arr, start=0, end=arr.length - 1) {
let arrayBars = document.getElementsByClassName('array-bar');
const pivot = Number(arrayBars[start].innerHTML);
var swapIdx = start;
for(var i = start + 1; i < arr.length; i++) {
const current_value = Number(arrayBars[i].innerHTML);
if(pivot > current_value) {
swapIdx++;
await swap(arrayBars[swapIdx], arrayBars[i]);
}
}
await swap(arrayBars[start], arrayBars[swapIdx]);
return swapIdx;
}
功能交换(el1、el2){
const container=document.getElementsByClassName('array-container');
返回新承诺(解决=>{
//等待过渡结束!
window.requestAnimationFrame(函数(){
设置超时(()=>{
容器[0]。insertBefore(el2,el1);
解决();
}, 15);
});
});
}
导出常量快速排序=异步(arr,左=0,右=arr.length-1)=>{
if(左<右){
让pivotIndex=等待pivot(arr,左,右);
等待承诺([
快速排序(arr,左,数据透视索引-1),
快速排序(arr,数据透视索引+1,右)
]);
}
返回arr;
}
异步函数轴(arr,start=0,end=arr.length-1){
让arrayBars=document.getElementsByCassName('array-bar');
const pivot=Number(arrayBars[start].innerHTML);
var swapIdx=启动;
对于(变量i=start+1;i当前_值){
swapIdx++;
等待交换(arrayBars[swapIdx],arrayBars[i]);
}
}
等待交换(arrayBars[start],arrayBars[swapIdx]);
回棉签;
}
async/await可能存在一些问题,但我真的无法独自解决。
提前谢谢