如何用RxJS Subject在每次下拉变更时捕获首个事件值？

要实现每次下拉组件变更时捕获首个事件值，你可以使用RxJS的auditTime(0)操作符，它能在每次连续触发的事件流中仅保留第一个事件，同时持续监听后续的下拉操作。

修改后的Angular代码 #

dropdownSubject = new Subject<any>();

constructor(){
    this.dropdownSubject.pipe(
        auditTime(0) // 仅保留每次连续事件中的第一个
    ).subscribe((res) => {
        console.log('rs.type ', res);
    }); 
}

makeSubject(event){
    this.dropdownSubject.next(event);
}

原理说明 #

• auditTime(0)会在第一个事件触发后，开启一个0毫秒的时间窗口，在此窗口内的所有后续同步事件都会被忽略。
• 对于用户的每次下拉操作（无论触发1次还是2次事件），只会捕获该操作触发的第一个事件，且后续的下拉操作仍能正常触发监听逻辑。

替代方案（手动标志位控制） #

如果不想使用auditTime，也可以通过标志位过滤事件：

dropdownSubject = new Subject<any>();
private isHandlingEvent = false;

constructor(){
    this.dropdownSubject.pipe(
        filter(() => {
            if (!this.isHandlingEvent) {
                this.isHandlingEvent = true;
                // 在下一个微任务周期重置标志位，忽略当前操作的后续事件
                queueMicrotask(() => this.isHandlingEvent = false);
                return true;
            }
            return false;
        })
    ).subscribe((res) => {
        console.log('rs.type ', res);
    }); 
}

makeSubject(event){
    this.dropdownSubject.next(event);
}

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