同步执行时更新DOM：Angular Material进度条实时更新问题

问题根源 #

JavaScript是单线程执行模型，你的同步计算逻辑会独占主线程，浏览器的DOM渲染、Angular变更检测任务都会被阻塞直到整个同步函数执行完成，所以你中途修改processedAmount的时候，没有机会触发视图更新，只有函数执行完才会一次性渲染最终状态。你之前用setTimeout没生效大概率是没有把计算任务拆分成独立的异步分片，而是把整个更新逻辑包在了同一个setTimeout里，本质还是同步阻塞。

解决方案1：分片异步执行（轻量计算场景推荐） #

把大的同步计算任务拆成多个小分片，每次执行完一个分片就把下一次执行放到事件循环队列，给主线程留出渲染和变更检测的间隙，可用async/await实现：

processedAmount?: number;
totalAmount?: number;

// 简易延迟函数，交出主线程控制权
private delay(ms: number = 0) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async doStuff() {
  this.processedAmount = 0;
  this.totalAmount = 100;

  for (let i = 0; i < this.totalAmount; i++) {
    // 此处执行你的同步计算逻辑
    this.processedAmount++; 
    // 每执行1个分片就等待0ms，相当于把后续逻辑丢到下一个宏任务，让出主线程给渲染
    // 如果单步计算量很小，可以每N步再await一次减少调度开销，比如每10步await一次
    await this.delay();
  }
}

如果要更流畅的进度更新，可以把setTimeout换成requestAnimationFrame，和浏览器的渲染帧对齐：

private nextFrame() {
  return new Promise(resolve => requestAnimationFrame(resolve));
}
// 循环里替换成 await this.nextFrame() 即可

解决方案2：Web Worker（重计算场景推荐） #

如果你的计算逻辑非常耗时，分片执行会拉长整体计算时间，可以把计算逻辑完全放到Web Worker中执行，Worker线程和主线程互不阻塞，计算过程中定期把进度通过postMessage发送给主线程更新视图即可：

1. 新建Worker文件calc.worker.ts：

// 计算逻辑完全放到Worker中
addEventListener('message', ({ data }) => {
  const total = data.totalAmount;
  for (let i = 0; i < total; i++) {
    // 此处执行同步计算逻辑
    postMessage(i + 1); // 发送当前进度到主线程
  }
})

2. 组件中调用：

doStuff() {
  this.processedAmount = 0;
  this.totalAmount = 100;

  const worker = new Worker(new URL('./calc.worker.ts', import.meta.url));
  worker.postMessage({ totalAmount: this.totalAmount });
  worker.onmessage = ({ data }) => {
    this.processedAmount = data;
  };
}

如果更新后视图没生效，可以注入ChangeDetectorRef，在赋值后调用detectChanges()手动触发变更检测。

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