为什么这种方法不适用于通过反应可视化快速排序？

Question

我正在制作一个排序可视化工具。使用绝对位置，我正在交换条形的变换。这种方法适用于 BubbleSort，但在 QuickSort 中会产生不需要的结果。下面是问题的详细解释。

const PIVOT_COLOR = '#FF4949';
const SORTED_COLOR = '#CB6BF9';

async function pivot(blocks, start = 0, end = blocks.length + 1) {
    let pivot = Number(blocks[start].childNodes[0].innerHTML);
    let swapIdx = start;
    let value;

    blocks[start].childNodes[1].style.backgroundColor = PIVOT_COLOR;

    for (let i = start + 1; i < blocks.length; i++) {
        value = Number(blocks[i].childNodes[0].innerHTML);

        blocks[i].childNodes[1].style.backgroundColor = 'blue';

        await new Promise((resolve) =>
            setTimeout(() => {
                resolve();
            }, 500)
        );

        if (pivot > value) {
            swapIdx++;

            let arr = [];
            blocks.forEach(el => arr.push(el.childNodes[0].innerHTML));
            console.log(arr);

            //swap(arr, swapIdx, i);
            await swap(blocks[swapIdx], blocks[i]);
        }

        blocks[i].childNodes[1].style.backgroundColor = SORTED_COLOR;
    }

    await swap(blocks[start], blocks[swapIdx]);
    console.log(swapIdx)
    blocks[start].childNodes[1].style.backgroundColor = SORTED_COLOR;
    return swapIdx;
}

export async function QuickSort(blocks, left = 0, right = blocks.length - 1) {
    if (left < right) {
        let pivotIndex = await pivot(blocks, left, right);
        //left
        await QuickSort(blocks, left, pivotIndex - 1);
        //right
        await QuickSort(blocks, pivotIndex + 1, right);
    }
}

function swap(el1, el2) {
    let wrapper = document.getElementById('wrapper')
    let container = wrapper.childNodes[0];
    return new Promise((resolve) => {
        var temp = el1.style.transform;
        el1.style.transform = el2.style.transform;
        el2.style.transform = temp;

        window.requestAnimationFrame(function () {

            // For waiting for .25 sec
            setTimeout(() => {
                container.insertBefore(el2, el1);
                resolve();
            }, 250);
        });
    });
}

var naming reference

当我交换 swapIdx 和 i swap(blocks[swapIdx], blocks[i]) 时，条形图未在正确的 swapIdx 中交换，如下图所示，但它们被插入到 DOM 中的正确位置。

Image showing bars not swapping in the correct position

Answer 1

两个问题：

• 您的代码并没有真正通过调用 insertBefore... 来交换 DOM 节点...而是旋转两个给定元素之间范围内的元素：元素 2 插入之前元素 1，这意味着发生在元素 1 和 2 之间的所有元素都被移动了。

• 您的blocks 数组保持不变。那里什么都没有交换。然而，您还应该交换 blocks 数组中的节点，因为这是您的算法执行比较的基础。

要真正交换两个 DOM 元素，请执行以下操作：

• 创建临时虚拟元素
• 调用replaceWith将该元素交换到文档中，同时取出第一个元素。
• 调用replaceWith 将该元素（已取出）与另一个元素交换
• 调用replaceWith 将第二个元素与临时元素交换。