为什么实现排序算法可视化时数组仅在排序完成后更新视图？

• JavaScript单线程执行模型限制：所有同步代码会优先执行完毕，才会处理UI渲染、异步回调等任务。你写的两层for循环全是同步代码，过程中所有this.tab = tab的赋值操作虽然确实执行了，但浏览器会等到整个sort函数的同步代码全部跑完，才会统一触发UI更新，所以你看不到中间的变化过程，只能看到最终排序结果。
• 延时逻辑完全不生效：setTimeout(() => { }, 100000)不会阻塞当前主线程的执行，它只是把一个空的回调函数投递到异步任务队列，约定100秒后执行，主线程会立刻往下执行循环逻辑，整个排序过程实际在几毫秒内就跑完了，根本没有达到你想要的放慢排序过程的效果。
• 数组引用未变更导致变更检测跳过：你操作的始终是同一个数组引用，循环中执行this.tab = tab时，两边指向的是同一个数组对象，Angular默认的变更检测会认为绑定值没有发生变化，直接跳过视图更新步骤。

你可以用async/await的方式把每一步排序改成异步，让出主线程给Angular做视图更新：
首先定义通用延时函数：

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

改造后的排序函数：

public async sort(tab: number[]) {
  let start = performance.now();
  let smallest;
  // 初始赋值生成新数组，确保触发变更检测
  this.tab = [...tab];
  for (let i = 0; i < this.tab.length; i++) {
    smallest = this.tab[i];
    for (let j = i + 1; j < this.tab.length; j++) {
      // 每次循环等待100ms，放慢排序过程
      await delay(100);
      if (this.tab[j] < smallest) {
        let tmp = this.tab[j];
        this.tab[j] = smallest;
        this.tab[i] = tmp;
        smallest = tmp;
        // 每次修改后生成新数组赋值，强制触发变更检测
        this.tab = [...this.tab];
      }
    }
  }
  let end = performance.now();
  this.time = end - start;
}

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