如何按固定间隔轮询Angular的Observable<number>以降低数据更新频率？

嘿，刚接触Angular碰到这种需求太正常了！RxJS里正好有现成的操作符能优雅解决这个问题，完全不用自己拼timer那些复杂逻辑~

你的核心需求是每隔固定时间间隔（这里是200ms，对应每秒5次）获取源Observable的当前最新值，最适合的操作符就是sampleTime：

实现代码 #

首先别忘了导入对应的操作符：

import { sampleTime } from 'rxjs/operators';

然后直接在pipe里使用即可：

highFrequencyData$: Observable<number> = this.myHighFrequencyDataService.highFrequencyData$;

// 转换为每秒5次的低频Observable
lowFrequencyData$: Observable<number> = this.highFrequencyData$.pipe(
  sampleTime(200) // 1000ms / 5 = 200ms，每隔200ms采样一次最新值
);

// 订阅展示
this.lowFrequencyData$.subscribe(value => this.displayValue(value));

补充说明：sampleTime vs auditTime #

如果你的场景是只在有新数据产生时才按频率输出，可以换成auditTime(200)，它的逻辑是：每当源Observable发出值后，等待200ms，然后发出这段时间内的最后一个值（避免短时间内多次输出）。但如果你需要严格按照每秒5次的频率展示，哪怕数据没更新也保持当前值，sampleTime是更准确的选择，它会定时主动采样源Observable的当前值。

注意事项 #

• 一定要确保导入了对应的RxJS操作符（sampleTime或auditTime），否则会出现运行时错误；
• 这种方式完全是响应式的，符合Angular的RxJS最佳实践，比手动用setInterval去订阅取值要优雅得多~

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