使用JS+HTML+CSS实现冒泡排序可视化无法查看中间结果问题求解

问题原因 #

• 浏览器的JS执行和DOM渲染是串行共用主线程的，只有当前所有同步JS代码执行完毕后，浏览器才会批量处理渲染队列里的DOM变更，刷新页面。
• 你实现的sleep函数是通过死循环阻塞主线程的，整个排序循环的代码都是同步执行的，过程中所有修改样式、交换高度的操作都被压入渲染队列，不会立刻生效，直到循环全部跑完、主线程空闲后，浏览器才会渲染最终的DOM状态，因此看不到中间过程。

解决方案 #

把排序逻辑改成异步函数，用非阻塞的延时方式替代原有的死循环sleep，让主线程在每次等待的间隙有时间执行DOM渲染：

1. 首先改写sleep函数为返回Promise的异步版本：

function sleep(num) {
  return new Promise(resolve => setTimeout(resolve, num))
}

2. 把整个排序逻辑包裹在async函数里，每次sleep前用await等待，让出主线程给浏览器渲染：

// 外层用async修饰函数
async function bubbleSort() {
  for (let i = 0; i < elements; i++) {
    // 可选优化：内层循环可以写成j < elements - i -1，每轮排序后末尾i个元素已经有序无需再比较
    for (let j = 0; j < elements; j++) {
      let a = temp[i].style.height;
      let b = temp[j].style.height;

      // 标记当前正在比较的元素
      temp[i].style.backgroundColor = 'green';
      temp[j].style.backgroundColor = 'blue';

      if (parseFloat(a) < parseFloat(b)) {
        // 交换元素高度
        let t = a;
        temp[i].style.height = b;
        temp[j].style.height = t;
      }

      // 等待500ms，此时主线程空闲，浏览器会渲染当前的DOM状态
      await sleep(500);

      // 恢复元素样式
      temp[i].style.backgroundColor = 'white';
      temp[j].style.backgroundColor = 'white';
    }
  }
}
// 调用排序函数
bubbleSort()

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