如何在HTML和JS中可视化快速排序算法的元素排序过程

核心问题分析 #

你当前的快速排序逻辑是正确的，但DOM元素没有和数组同步更新。之前在swap后尝试更新没奏效，本质原因是递归同步执行速度太快，浏览器来不及渲染中间状态就完成了所有排序，或者DOM更新的方式不对。

具体解决方案 #

1. 新增DOM同步函数 #

写一个专门的函数，根据当前数组的顺序重新排列页面上的div元素：

function updateDOM() {
  // 遍历数组，按顺序将对应div移到容器中（利用appendChild移动已有元素的特性）
  values.forEach(element => {
    const div = document.getElementById(element.id);
    container.appendChild(div);
  });
}

2. 修改swap函数，同步DOM并添加视觉延迟 #

在交换数组元素后调用DOM更新函数，同时添加异步延迟，让视觉能跟上排序过程：

async function swap(items, leftIndex, rightIndex){
    // 交换数组元素
    const temp = items[leftIndex];
    items[leftIndex] = items[rightIndex];
    items[rightIndex] = temp;
    // 同步更新DOM顺序
    updateDOM();
    // 添加延迟（可根据需求调整毫秒数）
    await new Promise(resolve => setTimeout(resolve, 300));
}

3. 改造递归函数为异步 #

因为swap变成了异步函数，调用它的partition和quickSort也需要改为异步，确保排序步骤按顺序执行：

async function quickSort(arr, start, end){
    if(start >= end){
        return;
    }
    const index = await partition(arr, start, end);
    await quickSort(arr, start, index-1);
    await quickSort(arr, index + 1, end);
    return arr;
}

async function partition(arr, start, end){
    let pivotIndex = start;
    const pivotValue = arr[end].value;
    for (let i = start; i < end ; i++){
        if(arr[i].value < pivotValue){
            await swap(arr, i, pivotIndex);
            pivotIndex ++;
        }           
    }
    await swap(arr,pivotIndex, end);
    return pivotIndex;
}

4. 启动排序的正确方式 #

在触发排序的事件中使用异步调用：

// 示例：绑定按钮点击事件启动排序
document.getElementById('sortBtn').addEventListener('click', async () => {
    await quickSort(values, 0, values.length - 1);
    console.log('排序完成');
});

关键说明 #

• 之前直接在swap后更新DOM看不到效果，是因为JS同步执行会阻塞DOM渲染，所有排序步骤完成后才会一次性更新DOM。添加异步延迟后，每次交换都会给浏览器留出渲染时间。
• updateDOM利用appendChild的移动特性，无需重新创建div，仅调整现有元素顺序，性能更优。

内容的提问来源于stack exchange，提问作者Spiderman