Angular 14使用RxJS实现指定日期起始毫秒计数器异常排查

你的预期完全正确：

• 正常的已流逝时间计数器，毫秒数应当持续、平滑递增
• 秒数应当在毫秒累计满1000的整秒节点（即你标注的蓝色位置）跳变进位

• interval()未传入时间间隔参数
  RxJS的interval操作符第一个参数是发射周期（单位毫秒），不传时默认值为0，实际触发节奏跟随浏览器事件循环，既不稳定也不对应真实毫秒级时间流逝，是导致数值跳变位置异常的核心原因之一。
• 错误将interval的发射序号当作流逝毫秒数
  interval发出的值是从0开始递增的发射次数计数，不是订阅后流逝的毫秒数。你直接将这个序号和初始计算的时间差相加，得到的结果和真实已流逝时间完全不匹配。
• 初始时间差为静态一次性值
  elapsedTime仅在组件初始化阶段计算一次，后续不会随时间自动更新，累加逻辑完全和真实时间脱钩，运行时间越长误差越大。

不要依赖interval的发射计数累加计算时间，每次触发时直接读取当前时间戳和起始时间做差，从根源上避免累计误差，同时选择合适的刷新间隔平衡精度和性能（10ms间隔足够保证人眼看到平滑的毫秒递增效果，不会有卡顿感）。
修复后的TS代码：

import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

// 固定起始时间戳
startTime = new Date("April 10, 2013 00:00:00").getTime();
// 已流逝毫秒数流
count$: Observable<number> = interval(10).pipe(
  map(() => Date.now() - this.startTime)
);

模板部分保持原有写法即可，通过async管道自动订阅更新：

{{ count$ | async }}

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