30 天精通 RxJS (14)： Observable Operator - throttle, debounce

昨天讲到了在 UI 操做上很经常使用的 delay，今天咱们接着要来说另外两个也很是实用 operators，尤为在作性能优化时更是不可或缺的好工具！

Operators

debounce

跟 buffer、bufferTime 同样，Rx 有 debounce 跟 debounceTime 一个是传入 observable 另外一个则是传入毫秒，比较经常使用到的是 debounceTime，这里咱们直接来看一个示例

var source = Rx.Observable.interval(300).take(5);
var example = source.debounceTime(1000);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 4
// complete复制代码

JSBin | JSFiddle

这里只印出 4 而后就结束了，由于 debounce 运行的方式是每次收到元素，他会先把元素 cache 住并等待一段时间，若是这段时间内已经没有收到任何元素，则把元素送出；若是这段时间内又收到新的元素，则会把本来 cache 住的元素释放掉并从新计时，不断反复。

以如今这个示例来说，咱们每 300 毫秒就会送出一个数值，但咱们的 debounceTime 是 1000 毫秒，也就是说每次 debounce 收到元素还等不到 1000 毫秒，就会收到下一个新元素，而后从新等待 1000 毫秒，如此重复直到第五个元素送出时，observable 结束(complete)了，debounce 就直接送出元素。

以 Marble Diagram 表示以下

source : --0--1--2--3--4|
        debounceTime(1000)
example: --------------4|复制代码

debounce 会在收到元素后等待一段时间，这很适合用来处理间歇行为，间歇行为就是指这个行为是一段一段的，例如要作 Auto Complete 时，咱们要打字搜寻不会一直不断的打字，能够等咱们停了一小段时间后再送出，才不会每打一个字就送一次 request！

这里举一个简单的例子，假设咱们想要自动传送使用者打的字到后端

const searchInput = document.getElementById('searchInput');
const theRequestValue = document.getElementById('theRequestValue');

Rx.Observable.fromEvent(searchInput, 'input')
  .map(e => e.target.value)
  .subscribe((value) => {
    theRequestValue.textContent = value;
    // 在这里发 request
  })复制代码

若是用上面这段代码，就会每打一个字就送一次 request，当不少人在使用时就会对 server 形成很大的负担，实际上咱们只须要使用者最后打出来的文字就行了，不用每次都送，这时就能用 debounceTime 作优化。

const searchInput = document.getElementById('searchInput');
const theRequestValue = document.getElementById('theRequestValue');

Rx.Observable.fromEvent(searchInput, 'input')
  .debounceTime(300)
  .map(e => e.target.value)
  .subscribe((value) => {
    theRequestValue.textContent = value;
    // 在这里发 request
  })复制代码

JSBin | JSFiddle

这里建议你们到 JSBin 亲手试试，能够把 debounceTime(300) 注解掉，看看先后的差别。

throttle

基本上每次看到 debounce 就会看到 throttle，他们两个的做用都是要下降事件的触发频率，但行为上有很大的不一样。

跟 debounce 同样 RxJS 有 throttle 跟 throttleTime 两个方法，一个是传入 observable 另外一个是传入毫秒，比较经常使用到的也是 throttleTime，让咱们直接来看示例

var source = Rx.Observable.interval(300).take(5);
var example = source.throttleTime(1000);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 4
// complete复制代码

JSBin | JSFiddle

跟 debounce 的不一样是 throttle 会先开放送出元素，等到有元素被送出就会沉默一段时间，等到时间过了又会开放发送元素。

throttle 比较像是控制行为的最高频率，也就是说若是咱们设定 1000 毫秒，那该事件频率的最大值就是每秒触发一次不会再更快，debounce 则比较像是必须等待的时间，要等到必定的时间过了才会收到元素。

throttle 更适合用在连续性行为，好比说 UI 动画的运算过程，由于 UI 动画是连续的，像咱们以前在作拖拉时，就能够加上 throttleTime(12) 让 mousemove event 不要发送的太快，避免画面更新的速度跟不上样式的切换速度。

浏览器有一个 requestAnimationFrame API 是专门用来优化 UI 运算的，一般用这个的效果会比 throttle 好，但并非绝对仍是要看最终效果。

RxJS 也能用 requestAnimationFrame 作优化，并且使用方法很简单，这个部份会在 Scheduler 提到。

今日小结

今天介绍了两个很是实用的方法，能够帮咱们作程式的性能优化，并且使用方式很是的简单，不知道读者有没有收获？ 若是有任何问题，欢迎在下方留言给我，谢谢。