为什么在Angular组件构造函数中订阅interval observable无响应？

这是JavaScript单线程运行机制+主线程被同步计算阻塞导致的标准现象：

你的另一业务模块正在执行高频同步逐行数据处理，完全占满了浏览器主线程。所有异步回调（包括RxJS interval 的定时回调、UI渲染任务、变更检测逻辑）都会被推入任务队列等待，直到主线程的同步计算全部执行完毕、线程空闲后才会批量执行。所以你会直到组件销毁前才集中看到所有interval的输出日志。
另外要注意：你不需要用interval定时拉取进度值，这种方案本身就不合理，直接订阅公共服务的Subject再做限流即可。

• 方案1：优化大数据同步处理逻辑，主动让出主线程
  把整块的同步数据处理拆分成小批次，每处理一批就主动让出线程给异步任务、UI更新执行，示例代码如下：

// 改造前：全量同步处理，全程阻塞主线程
for (let i = 0; i < 100000; i++) {
  processSingleRow(i);
  this.commonService.progressSubject.next(i);
}

// 改造后：分批处理，每200条让出一次主线程
async function processAllRows() {
  const total = 100000;
  const batchSize = 200;
  for (let cur = 0; cur < total; cur += batchSize) {
    // 处理当前批次数据
    for (let i = cur; i < Math.min(cur + batchSize, total); i++) {
      processSingleRow(i);
      this.commonService.progressSubject.next(i);
    }
    // 主动让出主线程，等待0ms即可让待执行的异步任务跑完
    await new Promise(r => setTimeout(r, 0));
  }
}

改造完成后interval的定时回调就可以正常按每秒一次执行。

• 方案2：直接订阅进度Subject并做限流（更推荐）
  你不需要主动定时拉取进度值，直接订阅公共服务的Subject，通过RxJS操作符控制更新频率即可，性能远高于定时拉取：

import { auditTime } from 'rxjs/operators';
import { NgZone } from '@angular/core';

constructor(private commonService: CommonService, private ngZone: NgZone) {
  this.commonService.progressSubject.pipe(
    // 每1秒只取最新的一次进度值，避免高频更新导致的性能问题
    auditTime(1000),
    tap(progress => {
      // 如果出现进度值拿到了但视图不更新的情况，用ngZone.run包裹赋值逻辑触发变更检测即可
      this.ngZone.run(() => {
        console.log('当前进度', progress);
        this.currentProgress = progress;
      })
    })
  ).subscribe();
}

• 方案3：临时兼容（不推荐）
  如果暂时无法修改数据处理逻辑，可以把大数据计算逻辑迁移到Web Worker中执行，避免占用主线程，UI层的interval和进度展示就可以正常运行。

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