如何优化RxJS中同源双流拆分后合并的实现方式？

你的核心需求是将单个源流拆分为两个分支执行不同异步逻辑，再合并结果，当前的方案已经是防抖场景下的最优解之一，下面详细分析：

当前方案的合理性 #

你通过share()确保源流clicks仅被订阅一次，避免了源端逻辑（比如复杂计算、HTTP请求）的重复执行，之后分别对共享后的源流做防抖和映射，最后用merge合并结果，逻辑清晰且性能最优，完全符合“最后一次点击后1秒输出debounceA、2秒输出debounceB”的需求。

关于调换pipe和merge位置的可行写法 #

你设想的直接在pipe中传入merge并嵌套操作符的写法不可行，因为merge是创建Observable的工具函数，需要接收Observable实例而非操作符。不过可以用RxJS 7+新增的mergeWith操作符调整写法，本质和原方案一致：

import { fromEvent, debounceTime, map, mergeWith } from 'rxjs';

const clicks = fromEvent(document, 'click').pipe(share());

const stream$ = clicks.pipe(
  debounceTime(1000),
  map(() => 'debounceA'),
  mergeWith(
    clicks.pipe(
      debounceTime(2000),
      map(() => 'debounceB')
    )
  )
);

stream$.subscribe(x => console.log(x));

其他场景的替代写法 #

如果你的需求是每个点击事件都触发两个延迟输出（而非仅处理最后一次点击的防抖逻辑），可以用mergeMap结合merge实现，无需单独定义共享源流：

import { fromEvent, merge, of, delay, map, mergeMap } from 'rxjs';

const stream$ = fromEvent(document, 'click').pipe(
  mergeMap(() => merge(
    of('debounceA').pipe(delay(1000)),
    of('debounceB').pipe(delay(2000))
  ))
);

stream$.subscribe(x => console.log(x));

注意：此写法和原方案逻辑不同，原方案是防抖处理，此写法是每个点击都触发延迟输出。

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