RxJS中debounceTime与interval结合为何无法生效？

问题复现 #

你的代码里，interval(1000)每隔1秒生成一个序列值，但经过debounceTime(2000)处理后的订阅始终没有输出，未处理的订阅却能正常打印结果：

import {interval} from "rxjs";
import {debounceTime} from "rxjs/operators";

const int$ = interval(1000);

console.log("Start", Date.now());
int$.pipe(
  debounceTime(2000)
).subscribe(val => console.log("With Debounce", Date.now()))

int$.subscribe(val => console.log("Without Debounce", Date.now()))

核心原因 #

debounceTime的工作逻辑很明确：源Observable发射值后启动计时器，只有当计时器走完指定时长、且期间没有新值发射时，才会把最后那个值推送给订阅者。如果等待过程中有新值进来，计时器会立刻重置，重新开始计时。

对应到你的场景：

• interval(1000)每1秒就会发射新值，而debounceTime(2000)需要2秒的"空闲期"（无新值发射）才能输出结果。
• 第一个值触发计时器后，还没等2秒走完，第2个新值就来了，计时器被重置；再过1秒，第3个值又触发重置……这个循环永远不会出现2秒的空闲时间，所以debounceTime永远不会推送任何值到订阅者。

验证与调整 #

如果想让debounceTime生效，只需让源Observable的发射间隔大于debounceTime的等待时长，比如：

// 把interval间隔改为3000ms，大于debounceTime的2000ms
const int$ = interval(3000);
int$.pipe(debounceTime(2000)).subscribe(val => console.log("With Debounce", Date.now()))

此时每次发射后，计时器有足够的2秒时间走完，就能正常输出结果。

内容的提问来源于stack exchange，提问作者BąQ