RxJS scan()示例中console.timeEnd()报'myTimer不存在'错误的修复方案

问题背景 #

你在使用RxJS的scan()方法编写示例时遇到了控制台错误：Timer 'myTimer' does not exist，计时器无法正常工作。你的代码如下：

console.time('myTimer'); let source = Rx.Observable .interval(100) // interval starts from 0 .take(4) .scan((acc, val) => acc + val); source.subscribe((value) => { console.timeEnd('myTimer'); console.log('in next. Value: ', value); });

错误原因 #

这个问题的核心在于**console.timeEnd()的调用时机不对**：

• console.time('myTimer')只会创建一次计时器，而console.timeEnd('myTimer')在调用后会立即销毁对应的计时器。
• 你的Observable通过interval(100).take(4)会发射4次值，这意味着subscribe的next回调会执行4次。第一次调用console.timeEnd('myTimer')后，myTimer计时器就被清除了，后面3次调用自然找不到这个计时器，从而抛出错误。

修复方案 #

根据你的需求，有两种常见的修复方式：

方案1：统计整个流的总执行时间（推荐）

如果你的目标是统计从Observable启动到完成的总时间，把console.timeEnd()移到subscribe的complete回调中（第三个参数），这个回调只会在流结束时执行一次，完美匹配console.time()的调用：

console.time('myTimer'); 
let source = Rx.Observable
  .interval(100) // interval starts from 0
  .take(4)
  .scan((acc, val) => acc + val);

source.subscribe(
  (value) => { 
    console.log('in next. Value: ', value); 
  },
  (error) => { 
    console.error('Error occurred:', error);
    console.timeEnd('myTimer'); // 出错时也结束计时器
  },
  () => { 
    console.timeEnd('myTimer');
    console.log('Stream completed successfully');
  }
);

方案2：统计每个值的发射耗时

如果你需要统计每个值从计时器启动到发射的时间，那么需要为每个值使用唯一的计时器名称：

let source = Rx.Observable
  .interval(100)
  .take(4)
  .scan((acc, val) => acc + val);

source.subscribe((value) => {
  const timerName = `value_timer_${value}`;
  console.time(timerName);
  console.log('in next. Value: ', value);
  console.timeEnd(timerName);
});

效果验证 #

修改后的代码不会再抛出计时器不存在的错误，并且能准确统计你需要的时间信息。

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