JavaScript循环执行DOM操作过快 如何减速展示每次迭代渲染效果

你看不到逐次DOM更新，根本不是循环执行速度太快，是同步运行的JS代码会全程占用浏览器主线程，你在循环里触发的所有DOM修改都会被暂存在渲染队列里，直到整个排序函数执行完毕、主线程空出来，浏览器才会执行一次统一的重绘，所以你只能看到最终排序完成的状态。

• 不存在「同步减速还不阻塞渲染」的实现：JS是单线程模型，如果你写同步逻辑强行卡时间等待，主线程会一直被占用，浏览器依然没有机会执行渲染，哪怕你把循环卡到跑10秒，也只会直接跳最终结果。
• 你之前用setTimeout没达到效果，基本是写法问题：大概率是循环里批量创建的setTimeout没有做好时序控制，所有回调几乎在同一时间触发，没有形成逐次等待的间隔，不是setTimeout本身不适用。
• Promise配合async/await完全可以实现你要的逐次停顿效果：它不是强行做同步阻塞，而是把当前执行权交还给浏览器，等渲染完成、延迟时间到了再回来执行下一步逻辑，写出来的代码可读性和同步代码几乎一致。

核心思路是把排序逻辑改成异步函数，每完成一步元素交换/移动，先执行DOM更新，再等待一个人眼可识别的短间隔（比如200-500ms），给浏览器留出重绘时间，再执行下一轮操作。

// 延迟工具函数
const sleep = (waitMs) => new Promise(resolve => setTimeout(resolve, waitMs));

const insertion_sort = async function (array, stepInterval = 300) {
  // 修复原代码未声明i的全局变量bug
  for (let i = 1; i < array.length; i++) {
    const keyItem = array[i];
    let j = i - 1;

    while (j >= 0 && array[j] > keyItem) {
      array[j + 1] = array[j];
      j--;
      
      // 此处插入你已经写好的DOM更新逻辑
      // renderArrayToDom(array);

      // 等待间隔，交出主线程让浏览器完成渲染
      await sleep(stepInterval);
    }

    array[j + 1] = keyItem;
    // 单次元素插入完成后也可以触发一次DOM更新
    // renderArrayToDom(array);
    await sleep(stepInterval);
  }
  return array;
};

// 调用示例
// insertion_sort(targetArray).then(sortedResult => {
//   console.log('排序完成', sortedResult);
// });

注意：绝对不要用while循环比对时间戳的方式写同步sleep，这种写法会100%占满主线程，浏览器在循环退出前完全无法响应任何渲染或者交互，和你最初遇到的问题没有区别。

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