RxJS中of配合debounceTime无延迟的原因咨询

先看两段代码的实际表现差异：

第一段代码：

of('x')
   .pipe(
     startWith('y'),
     debounceTime(1000))
.subscribe(console.log);

运行后会立刻打印'x'，完全没有1000ms的延迟。

第二段代码：

const clicks = fromEvent(document, 'click');
clicks
    .pipe(
       map(() => 'x'),
       startWith('y'),
       debounceTime(1000)
)
.subscribe(console.log);

这段的初始值'y'，以及每次点击后生成的'x'，都会等待1000ms才会被打印。

核心原因：debounceTime对“源Observable完成”的特殊处理 #

debounceTime的基本逻辑是：收到值后启动计时器；如果计时器结束前没有新值进来，就发送当前值；如果有新值，就重置计时器。但有个关键细节：当源Observable主动触发complete信号时，debounceTime会立刻把当前缓存的最后一个值发送出去，不管计时器有没有走完。

拆解第一段代码的执行流程

of('x')是一个同步发值后立刻完成的Observable：

1. 订阅后，startWith('y')先发出'y'，debounceTime收到'y'并启动1000ms计时器。
2. 紧接着，of('x')同步发出'x'，debounceTime收到'x'后重置计时器，同时之前的'y'被覆盖。
3. 随即of('x')发出complete信号，告知debounceTime“不会再有新值了”。
4. debounceTime收到complete信号后，直接将当前缓存的最后一个值（'x'）立刻发送出去，跳过了剩余的计时——这就是'x'无延迟打印的原因，而'y'因为被后续值覆盖且源已完成，不会被输出。

拆解第二段代码的执行流程

fromEvent(document, 'click')是一个永远不会主动完成的Observable（除非手动取消订阅）：

1. 订阅后，startWith('y')发出'y'，debounceTime启动计时器；因为没有后续值（除非用户点击），所以必须等1000ms计时器走完才会发送'y'。
2. 用户点击文档时，fromEvent发出事件，经map转为'x'，debounceTime收到后启动计时器；如果接下来1000ms内没有新点击，计时器结束后才会发送'x'。
3. 由于fromEvent不会主动触发complete信号，debounceTime始终不会触发“完成时立刻发值”的逻辑，必须严格等计时器走完才输出值。

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