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 提到。

今日小結

今天介紹了兩個很是實用的方法，能夠幫咱們作程式的性能優化，並且使用方式很是的簡單，不知道讀者有沒有收穫？ 若是有任何問題，歡迎在下方留言給我，謝謝。