debounceTime 和 throttleTime 的弹珠图

debounceTime：测试代码

import {
  concat,
  debounceTime,
  filter,
  interval,
  mapTo,
  of,
  take,
  throttleTime,
} from 'rxjs';

const a = of(1);
const b = of(2);

const c = concat(a, b);

c.subscribe((data) => console.log(data));

const a1$ = interval(500).pipe(take(2), mapTo('A'));
const a2$ = interval(1000).pipe(take(3), mapTo('B'));
const a3$ = interval(500).pipe(take(3), mapTo('C'));
const source$ = concat(a1$, a2$, a3$);

const result$ = source$.pipe(debounceTime(800));

result$.subscribe((data) => console.log(data));

最后输出：A B B C

弹珠图：

第一阶段的两个 A，只有后者才能进入下游，因为第二个 A 和第二阶段的第一个 B，间隔时间大于 800 毫秒。

第二阶段的前两个 B 能够进入下游，而最后一个 B 不行，∵最后一个 B 和第三阶段的第一个 C 时间间隔小于 800 毫秒。

上游完结时，生成的最后一个元素，总是能进入下游。

如果改成 throttleTime，输出的序列为：A B B B C

弹珠图：

第二个 A 和 第一个 A 的时间间隔小于 800 毫秒，故不能进入下游。三个 B 的生成间隔全部大于 800 毫秒，故全部进入下游。第二个 C 生成时，距离最后一个 B 的生成已经过去了 1秒钟，时间间隔大于 800 毫秒，故第二个 C 进入下游。

更多Jerry的原创文章，尽在："汪子熙":