选择排序可视化开发中i索引块未随循环更新及节点交换异常问题

核心异常根因 #

• 问题完全来自交换分支内的多余手动数组操作。在调用swap函数之前，代码中多写了一段对blocks数组元素的手动位置调换逻辑，这部分操作不仅没有实际作用，还直接搞混了传给swap的参数。
• 按照设计，swap函数本身已经完整处理了两个元素的视觉过渡动画、DOM节点顺序调整的全流程，根本不需要调用前手动在JS层调换数组的元素引用。你手动交换数组元素后，传入swap的两个DOM引用刚好是反的，导致swap内部最后执行container.insertBefore(el2, el1)调整DOM顺序时，生成的节点序列和屏幕上通过transform呈现的视觉顺序完全脱节。
• 这种脱节直接造成了观测到的现象：你后续通过document.querySelectorAll('.block')重新获取的blocks数组，顺序和屏幕从左到右的实际显示顺序是错位的。代码里给blocks[i]设置的橙色高亮，根本对应不到屏幕上第i个位置的块，视觉上就表现为高亮全程固定不动，最小值始终在和初始位置的块交换。
• 其余排序算法没有加入这段多余的手动调换逻辑，传给swap的参数都是正确的，DOM顺序和视觉顺序始终匹配，所以不会出现同类问题。

具体修复方案 #

• 直接删除交换分支里那三行手动调换数组元素的代码即可。原问题代码：

if (min !== i) {
    let tmp = blocks[i];
    blocks[i] = blocks[min];
    blocks[min] = tmp;
    await swap(blocks[i], blocks[min]);
    blocks = document.querySelectorAll('.block');
}

替换为修正后的版本：

if (min !== i) {
    // 直接传入对应位置的原始DOM引用，swap会自动处理动画和DOM顺序调整
    await swap(blocks[i], blocks[min]);
    blocks = document.querySelectorAll('.block');
}

• 修正后，swap接收到的就是正确的两个待交换元素，内部执行完transform过渡、DOM插入操作后，DOM顺序会和视觉呈现顺序完全对齐。后续循环中给blocks[i]设置的橙色高亮，会正常随循环轮次从左到右推进，选择排序的交换逻辑也会回到预期的流程。

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