RxJS 中的 debounce、throttle 和 buffer 操作符
在前端开发中，我们经常需要处理来自用户的事件，比如点击、滚动、输入等等，而 RxJS 是一个强大的响应式编程库，可以帮助我们优雅地处理这些事件。
RxJS 提供了多种操作符来处理事件流，其中 debounce、throttle 和 buffer 操作符是比较常用的，本文就来详细介绍它们的使用方法。
debounce 操作符
debounce 操作符可以用来过滤掉高频率的事件，只有在一段时间内没有新事件到达时，前一个事件才会被传递到下游。
这个时间段由我们自己定义，比如下面的代码就是在用户停止输入 500 毫秒后才会触发 search 函数：
// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
const input = document.getElementById('searchbox');
const search$ = fromEvent(input, 'input').pipe(
debounceTime(500)
);
search$.subscribe(() => {
console.log('search!');
});在用户输入的过程中，每当输入框的值发生变化，就会触发 input 事件。debounceTime 操作符会把这些事件流中的值收集起来，如果接下来的事件在一定时间内没有出现，就会把收集到的值传递给 subscribe 函数。
throttle 操作符
throttle 操作符也可以用来过滤掉高频率的事件，但不同于 debounce，它会按照一定时间间隔把事件传递给下游。
下面的代码演示了每隔 1 秒钟就在控制台打印一个数字：
// javascriptcn.com 代码示例
import { interval } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const timer$ = interval(1000).pipe(
throttleTime(1000)
);
timer$.subscribe(num => {
console.log(num);
});在这个例子中，interval 操作符会每隔 1 秒钟产生一个事件，throttleTime 操作符会等待 1 秒钟，保证前一个事件处理完毕再处理下一个事件。
buffer 操作符
buffer 操作符可以将事件流中的值缓存起来，直到我们自定义的条件满足时，才会将缓存的所有值一起传递给下游。
下面的代码演示了每隔 3 秒钟输出最近 2 秒钟内点击事件的个数：
// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const btn = document.getElementById('btn');
const clicks$ = fromEvent(btn, 'click');
clicks$.pipe(
bufferTime(2000, 3000)
).subscribe(events => {
console.log(`Clicked ${events.length} times in last 2 seconds`);
});在这个例子中，bufferTime 操作符将事件流中的点击事件缓存起来，每隔 3 秒钟将缓存的所有值一起传递给 subscribe 函数。
其中，2000 是缓存的时间段，3000 是相邻两个缓存间的时间间隔，意思是每隔 3 秒钟把缓存的值传递给 subscribe 函数。
总结
debounce、throttle 和 buffer 操作符是响应式编程中常用的操作符，它们可以帮助我们优雅地处理事件流。
debounce 操作符可以在高频率事件中只保留最后一个事件，throttle 操作符可以按照一定时间间隔传递事件，而 buffer 操作符则可以将事件缓存起来，一次性传递给下游。我们可以根据自己的需求选择合适的操作符，使得代码更加优雅、简洁。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538d95a7d4982a6eb1f99dc