选择排序可视化问题：内循环执行后无法实时更新视图

嘿，我懂你的困扰——现在你的代码跑得太“急”了，浏览器还没来得及把每一步的DOM更新渲染出来，整个排序就已经完成了，所以直接看到最终结果。这是因为JavaScript是单线程的，同步循环会阻塞DOM渲染，咱们来调整一下代码，让每一步的变化都能看得见！

问题根源 #

浏览器的DOM更新是在事件循环的宏任务队列空闲时才会执行的。你的排序循环是同步执行的，会一口气跑完所有迭代，期间浏览器根本没机会去渲染中间的DOM变化，所以最后只能看到最终状态。

修改后的代码 #

我们可以用async/await结合延迟函数，给浏览器留出渲染的时间：

const reframe = () => {
  // 加上const避免全局变量污染
  const ele = document.querySelectorAll(".element");
  ele.forEach((el, index) => {
    el.style.height = `${arr[index]}px`;
  });
};

// 封装一个延迟函数，返回Promise用于暂停执行
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// 把排序函数改成async，这样才能用await
const selection_sort = async () => {
  for (let j = 0; j < n - 1; j++) {
    for (let k = j + 1; k < n; k++) {
      if (arr[j] > arr[k]) {
        let temp = arr[j];
        arr[j] = arr[k];
        arr[k] = temp;
        console.log(arr);
      }
      // 更新当前状态的DOM
      reframe();
      // 暂停300ms，让浏览器有时间渲染（时间可以根据需求调整）
      await delay(300);
    }
  }
};

关键改动说明 #

• 新增delay函数：通过setTimeout返回一个Promise，配合await让代码在每次循环迭代后暂停，给浏览器渲染DOM的机会。
• selection_sort改为async函数：只有异步函数才能使用await语法，实现非阻塞的暂停。
• 修复变量声明：给ele加上const，避免意外的全局变量问题。

可选调整：按选择排序逻辑更新 #

如果你的需求是每轮找到最小元素并完成交换后再更新可视化（更符合选择排序的核心逻辑），可以把reframe()和await移到内层循环外面：

const selection_sort = async () => {
  for (let j = 0; j < n - 1; j++) {
    let minIndex = j;
    // 先找到当前未排序部分的最小元素索引
    for (let k = j + 1; k < n; k++) {
      if (arr[minIndex] > arr[k]) {
        minIndex = k;
      }
    }
    // 只交换一次，这才是标准选择排序的写法
    if (minIndex !== j) {
      let temp = arr[j];
      arr[j] = arr[minIndex];
      arr[minIndex] = temp;
      console.log(arr);
    }
    // 完成一轮选择+交换后更新可视化
    reframe();
    await delay(300);
  }
};

这样每一轮外层循环结束后，你就能看到当前最小元素被放到正确位置的变化啦～

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