如何利用另一observable的值对目标observable进行过滤与debounce防抖处理

实现方案 #

完全可以仅通过RxJS的原生操作符实现该需求，核心思路是借助switchMap的流切换能力，结合takeUntil监听校验流的异常值，代码示例如下：

import { switchMap, timer, takeUntil, filter, map } from 'rxjs';

// formChange$ 是你的表单变更源Observable
// inspector$ 是你的校验Observable
const allowSave$ = formChange$.pipe(
  // 每次表单变更触发时，取消上一次未完成的校验窗口，重新计时
  switchMap((latestFormValue) => {
    // 启动1分钟倒计时，倒计时结束后返回最新的表单值
    return timer(60000).pipe(
      map(() => latestFormValue),
      // 只要1分钟窗口期内校验流触发过false，立刻终止当前流，不输出任何值
      takeUntil(inspector$.pipe(filter((isAllowSave) => isAllowSave === false)))
    )
  })
);

逻辑匹配说明 #

• 天然满足防抖要求：如果源Observable在1分钟窗口期内再次触发，switchMap会自动取消上一次的倒计时，重新开启1分钟窗口，和debounceTime效果完全一致
• 覆盖窗口期内所有校验值：只要窗口期内inspector触发过任意一次false，takeUntil会直接终止当前流，不会输出值，解决了withLatestFrom只能取最新值的问题
• 仅源触发时才会输出：内部逻辑仅在表单变更源触发时才会启动，inspector单独触发值不会产生任何输出，符合你的场景要求

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