RxJS Timer/Interval仅执行一次而非每秒执行的问题求助

可能的原因及排查步骤 #

1. API请求未捕获错误导致流终止 #

RxJS流一旦出现未处理的错误，整个Observable会直接终止，后续timer/interval的触发会完全停止。你可以在API调用的Observable中添加错误捕获，同时验证timer是否在持续发射值：

this.callActiveListSubscription = timer(0, 1000).pipe(
  tap(tick => console.log(`Timer触发次数: ${tick}`)), // 检查timer是否每秒输出
  switchMap(() => this.realtimeSupervisorHeatMapService.getLiveCallList().pipe(
    catchError(err => {
      console.error('获取实时通话列表失败:', err);
      return EMPTY; // 返回EMPTY维持主流活跃，避免错误中断循环
    })
  ))
).subscribe(...)

如果控制台只输出Timer触发次数: 0，说明timer本身未正常工作；如果有连续的tick输出但API仅调用一次，问题出在API请求的Observable上。

2. getLiveCallList返回重复的Observable实例 #

确保服务中的getLiveCallList方法每次调用都返回新的Observable（比如Angular HttpClient的方法天然满足这个要求）。如果方法返回的是同一个已完成的Observable，后续订阅只会拿到完成信号，不会触发新请求：

// 错误示例：返回同一个Observable，仅执行一次请求
private liveCallList$ = this.http.get('/api/live-calls');
getLiveCallList() {
  return this.liveCallList$;
}

// 正确示例：每次调用生成新请求
getLiveCallList() {
  return this.http.get('/api/live-calls');
}

3. 组件提前销毁导致订阅取消 #

如果组件初始化后很快被销毁（比如路由跳转），订阅会自动取消，表现为只执行一次。可以在ngOnDestroy中添加日志确认：

ngOnDestroy() {
  console.log('组件销毁，取消订阅');
  this.callActiveListSubscription?.unsubscribe();
}

修复后的完整代码示例 #

import { timer, EMPTY } from 'rxjs';
import { switchMap, tap, catchError } from 'rxjs/operators';

// ...

ngOnInit() {
  this.callActiveListSubscription = timer(0, 1000).pipe(
    tap(tick => console.log(`Timer触发次数: ${tick}`)),
    switchMap(() => this.realtimeSupervisorHeatMapService.getLiveCallList().pipe(
      catchError(err => {
        console.error('API请求失败:', err);
        return EMPTY;
      })
    ))
  ).subscribe((data: any) => {
    console.log('inside get live call list subscription', data);

    let fetchRequired = data.fetchRequired;
    this.recent_data = data;

    var listOfStrem = data.stream;
    var list = data.list_Of_contacts.filter(el => el != null);
    
    if (list.length === 0) {
      this.allCallsData = [];
      this.agentCallList = [];
      this.filteredCallList = [];
      this.activeCallCount = 0;
      this.selectedCallData = null;
    } else {
      this.activeCallCount = this.selectedBusinessUnit !== 'All'
        ? list.filter(item => item.business_unit === this.selectedBusinessUnit).length
        : list.length;
    }

    this.agentCallList = [];
    list.forEach((itemData, i) => {
      if (!itemData) return;
      
      const slackDMUrl = itemData.agentSlackDMUrl === "NA" ? "#" : itemData.agentSlackDMUrl;
      const item = {
        name: itemData.contact,
        agent_name: itemData.agent_name,
        agentId: itemData.agentId,
        streamStartTime: itemData.streamStartTime,
        slackDMUrl,
        phrase_count: itemData.phrases_count,
        business_unit: itemData.business_unit
      };

      const index = this.agentCallList.findIndex(el => el.name === item.name);
      if (index === -1) {
        this.agentCallList.push(item);
      } else {
        this.agentCallList[index] = item;
      }
      this.agentCallList.sort((a, b) => b.phrase_count - a.phrase_count);

      if (i === list.length - 1) {
        this.changeBusinessUnitDropdown();
      }
    });
  });
}

ngOnDestroy() {
  this.callActiveListSubscription?.unsubscribe();
}

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