RxJS：缓冲唯一值并在停止发射值x秒后发射结果

嘿，这个需求我之前做表单交互的时候刚好碰到过，用RxJS的几个操作符组合起来就能完美解决！咱们一步步来拆解实现思路和代码：

核心思路 #

要实现这个需求，关键要完成两件事：

1. 过滤掉连续重复的字段事件（比如连续编辑同一个字段，只保留第一次切换的信号）
2. 缓冲这些去重后的事件，直到用户停止输入达x秒时，把缓冲的唯一值数组发射出去

代码实现示例 #

假设你的表单字段输入事件流是fieldEvents$（比如从input的input事件转换而来，每次发射被编辑的字段名称），我们可以这样处理：

import { fromEvent } from 'rxjs';
import { buffer, debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

// 1. 先构造你的字段事件流（这里以表单input元素为例）
const fieldEvents$ = fromEvent(document.querySelectorAll('input'), 'input').pipe(
  map(event => (event.target as HTMLInputElement).name) // 提取被编辑的字段名称
);

// 2. 处理成符合需求的缓冲流（这里x设为1000毫秒，可根据需求调整）
const bufferedUniqueFields$ = fieldEvents$.pipe(
  // 过滤连续重复的字段，只保留每次切换后的第一个值
  distinctUntilChanged(),
  // 缓冲去重后的事件，直到用户停止输入1秒后发射数组
  buffer(fieldEvents$.pipe(debounceTime(1000)))
);

// 3. 订阅结果
bufferedUniqueFields$.subscribe(editedFields => {
  console.log('停止输入后，编辑过的唯一字段：', editedFields);
});

操作符详解 #

咱们来拆解下每个操作符的作用：

• distinctUntilChanged()：这个操作符会对比当前事件和上一个事件的值，只有当值不同时才会发射。这样连续三次编辑description字段，就只会留下一个"description"信号，完美解决连续重复的问题。
• buffer(trigger$)：这个操作符会收集所有流入的事件，直到trigger$发射一个值时，把收集到的所有事件以数组形式发射出去。这里我们用原事件流经过debounceTime(1000)作为触发信号——意思是当用户最后一次输入后，等待1秒没有新输入，就触发缓冲数组的发射。

效果验证 #

比如用户的操作序列是：连续3次编辑description → 连续2次编辑name → 停止输入1秒，那么最终发射的数组就是["description", "name"]；如果之后用户又编辑description并停止输入，后续的缓冲会再次发射["description"]，完全符合“同一值可在后续不同缓冲中再次出现”的要求。

内容的提问来源于stack exchange，提问作者ᴘᴀɴᴀʏɪᴏᴛɪs