RxJS中如何避免订阅与上次发射值相同的组合结果

开发者阿泽

2026-7-12

问题

如何避免订阅与上次发射值相同的组合结果

现有代码如下：

this.first$.next('one');
this.second$.next(false);
    
combine$ = combineLatest([this.first$, this.second$])
  .pipe(map(([first, second]) => {
    //do something if one of the values is different
  }))

需求：仅当其中一个值与上次发射的值不同时才进行订阅。

示例

场景一

第一次发射:
this.first$.next('one');
this.second$.next(false); -> 订阅首次发射的值
第二次发射:
this.first$.next('one');
this.second$.next(false); -> 不订阅此次发射的值

场景二

第一次发射:
this.first$.next('one');
this.second$.next(true); -> 订阅首次发射的值
第二次发射:
this.first$.next('one');
this.second$.next(false); -> 订阅此次发射的值

解决方案

使用RxJS的distinctUntilChanged操作符即可实现需求，不过需要自定义比较函数来处理数组类型的组合值（默认的引用比较对数组无效）。

修改后的代码如下：

import { distinctUntilChanged } from 'rxjs/operators';

// 自定义比较函数：判断两次组合结果是否完全一致
const isCombinedEqual = (prev: [string, boolean], curr: [string, boolean]) => {
  return prev[0] === curr[0] && prev[1] === curr[1];
};

combine$ = combineLatest([this.first$, this.second$])
  .pipe(
    distinctUntilChanged(isCombinedEqual),
    map(([first, second]) => {
      // 此处逻辑仅在组合值变化时执行
      // do something
    })
  );