RxJS 中的 Buffer、DebounceTime、ThrottleTime 实现详解
RxJS 作为目前前端开发中最流行的响应式编程库，提供了各种强大的操作符，通过它们我们可以轻松地处理异步数据流，实现复杂的业务逻辑。本文将详细解释 RxJS 中的 Buffer、DebounceTime 和 ThrottleTime 操作符的使用，这些操作符在前端开发中的场景非常常见。
- Buffer 操作符
Buffer 操作符是 RxJS 中一种高度灵活的操作符，它通过可定制的缓冲区收集源 Observable 的值，然后将其作为一个数组发出。Buffer 操作符有以下两个变种：
- Buffer 操作符
- BufferTime 操作符
Buffer 操作符的语法如下：
buffer(closingNotifier: Observable<any>): Observable<T[]>
该方法通过一个 Observable 参数 closingNotifier 来决定缓冲区间隔的关闭时机。closingNotifier 所发出的任意事件都可以设置缓冲区间隔的关闭时机，比如定时发送一个事件、一个新的源 Obervable 发出值、另一个操作符需要打开新的缓冲区等。
示例代码如下：
-- -------------------- ---- ------- ------ - --- -------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------ - -------------- ----- --------------- - ----------- ----- -------- - ------------------------------------- -------------------- -- ---------------- -- ------ -- --- --- --- -- --- --- --- -- --- --- --- --- ---- -----展开代码
以上代码用 interval 创建一个每三百毫秒发射一个值的 Observable，然后将其作为源 Observable，用 buffer 进行缓冲处理，每次间隔 2000 毫秒关闭缓冲区并将其发出。由于 closingNotifier Observable 在发出每个通知事件时，buffered Observable 都将创建新的缓冲区并将其发出。
- DebounceTime 操作符
在前端开发中， DebounceTime 操作符也是经常使用到的。它的作用是在源 Observable 发出值的间隔小于指定的时间间隔时，将源 Observable 最后一个值丢弃，并让它在过了指定时间后才能传递。
DebounceTime 操作符的语法如下：
debounceTime(duration: number, scheduler: SchedulerLike = async): Observable<T>
参数 duration 表示要等待的时间（单位毫秒），scheduler 表示可选参数的调度器，它用于在延迟结束时发出值。
示例代码如下：
import { fromEvent } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; const input = document.getElementById('test-input'); const input$ = fromEvent(input, 'keyup'); input$.pipe(debounceTime(2000)).subscribe(console.log);
以上代码用 fromEvent 来创建一个输入框的事件源 Observable 对象，然后用 debounceTime 对这个 Observable 进行处理，使输入框在输入过程中不会对后端进行数据上传，只有在停止输入 2s 后才开始上传。
- ThrottleTime 操作符
当我们想控制源 Observable 的发射频率时，就可以用到 ThrottleTime 操作符。ThrottleTime 可以让源 Observable 在规定的时间窗口内只发出一次值，以限制数据处理的速度。
ThrottleTime 操作符的语法如下：
throttleTime(duration: number, scheduler: SchedulerLike = async, options?: ThrottleConfig): Observable<T>
参数 duration 表示时间窗口的大小（单位毫秒），scheduler 表示可选参数的调度器，options 可以传递一个对象，用于在不发送数据期间实现 throttle 的行为（leading 和 trailing）。leading 表示触发时间窗口开始的时间点是否发出值，trailing 表示时间窗口结束时是否要发出最后的值。
示例代码如下：
import { fromEvent } from 'rxjs'; import { throttleTime } from 'rxjs/operators'; const button = document.getElementById('test-button'); const button$ = fromEvent(button, 'click'); button$.pipe(throttleTime(2000)).subscribe(console.log);
以上代码创建一个按钮的事件监听器，用 button$ 来代表事件源 Observable 对象，然后用 throttleTime 对这个 Observable 进行处理，当每次点击按钮时，只有在 2s 内才能再次触发一次点击事件。
综上所述，Buffer、DebounceTime 和 ThrottleTime 是 RxJS 中非常有用的操作符，它们可以帮我们更加方便地控制异步数据流的流转，极大地简化了复杂的业务逻辑实现。当我们遇到类似的操作时，可以考虑使用它们来实现业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bffa0f0c976d473a4fd7b7
