Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 快速排序可视化(JS/React)-为什么某些值保持不变_Javascript_Reactjs_Algorithm_Sorting_Quicksort - Fatal编程技术网

Javascript 快速排序可视化(JS/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 =>

我试图使排序算法可视化,并出现一些问题与快速排序可视化。重点是什么?当我在没有动画的情况下测试它(仅交换数组索引和更改数组状态(React))时,一切都很好,但当我添加动画函数时,一些值进入交换条件,但保持未交换状态

代码如下:

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可能存在一些问题,但我真的无法独自解决。 提前谢谢