JavaScript选择排序可视化：循环内调用打印函数却仅显示最终结果的技术求助

Hey there! I get why this is frustrating—you’re calling printArray after each swap, but the browser just jumps straight to the final sorted state instead of showing each step. Let’s break down what’s happening and fix it.

问题原因 #

JavaScript runs in a single thread, and browsers batch DOM updates to optimize performance. Your selectionSort function is entirely synchronous: it blazes through all loop iterations in one go, updating the DOM each time, but the browser waits until the entire loop finishes before re-rendering the page. That’s why you only see the final result.

解决方案：引入异步延迟 #

We need to give the browser time to render each step before moving on to the next iteration. The cleanest way to do this is using async/await with a small delay between steps. Here’s how to adjust your code:

1. 添加延迟辅助函数 #

First, create a simple helper function that returns a Promise to pause execution for a specified number of milliseconds:

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

2. 修改选择排序为异步函数 #

Update selectionSort to be an async function, and add await delay(...) after calling printArray to let the browser render the current array state:

async function selectionSort(array) { 
  var i, j, min_idx; 
  let n = array.length; 
  for (i = 0; i < n-1; i++) { 
    min_idx = i; 
    for (j = i + 1; j < n; j++) { 
      if (array[j] < array[min_idx]) { 
        min_idx = j; 
      } 
    } 
    // 执行元素交换
    var temp = array[min_idx]; 
    array[min_idx] = array[i]; 
    array[i] = temp; 
    // 更新可视化界面
    printArray(array); 
    // 暂停执行，给浏览器时间渲染当前状态
    await delay(300); // 可调整此数值控制动画速度（单位：毫秒）
  } 
}

3. 调用异步排序函数 #

Since selectionSort is now an async function, it returns a Promise. You can call it like this (add .then() if you need to run code after sorting finishes):

// 示例待排序数组
const unsortedArray = [64, 25, 12, 22, 11];
selectionSort(unsortedArray).then(() => {
  console.log("排序完成！");
});

为什么这样有效？ #

The await delay(300) pauses the selectionSort function’s execution, allowing the browser to process pending DOM updates (i.e., render the current array state) before continuing to the next iteration. This breaks the synchronous loop into asynchronous steps that the browser can render one by one.

Alternatively, you could use setTimeout to wrap each iteration’s logic, but async/await keeps the code clean and easy to follow.

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