Rxjs防抖與節流在項目中的應用

背景一：當前項目引用了tinyMce以及公式編輯器，在實際的使用中發現，有些題目可能須要較長的時候來填寫。因爲填寫的時間超出了cookie的過時時間，因此當用戶千辛萬苦的填寫完之後，點擊保存按鈕時發生了401。再回來原來的界面，一切歸0。雖然當前已經採用了相似於github的處理方式，但因爲在添加、編輯題目時的特殊性，實際的體驗並很差。

背景二：當前項目對安全性要求比較高，咱們但願10分鐘內若是沒有監測到用戶的操做記錄的話，進行鎖屏的處理。

雖然在沒有充分的使用Rxjs以前，該功能也可以實現，但Rxjs的防抖與節流功能能夠更簡單的知足上述需求。

節流 throttleTime

爲了解決背景一，咱們提出了新的想法：用戶編輯tinyMce的內容時，組件使用了特定的方法進行接收。在這個接收方法中，咱們記錄最新接收值的時間，並去對應觸發後臺的心跳方法。這樣以來，就保障了用戶在編輯內容時充分地與後臺進行交互，而不會在保存時因爲過長時間未與後臺交互發生的401問題了。

而此方法雖然可以解決401的問題，但卻形成了大量的冗餘請求。而實際上若要保證cookie有效期，只要保證適時的與後臺進行交互便可。Rxjs的節流
throttleTime能夠很好的知足當前的要求。

套用官方文檔的一張圖來簡單說下：throttleTime

如圖：在throttleTime操做符下，設置了間隔爲50ms。上圖中axybxcx分別在第0，10，20，60，100，100ms時發射了數據。

• a 第一個發射的數據，不過濾，發送給訂閱者。
• x 10ms發射的數據，距離(上一次成功發射)a間隔小於50ms，過濾，不發送給訂閱者。
• y 20ms發射的數據，與a間隔小於50ms，過濾，不發送給訂閱者。
• b 60ms發射的數據，與a間隔不於小50ms，不過濾，發送給訂閱者。
• x 100ms發射的數據，與(上一次成功發射)b間隔小於50ms，過濾，不發送給訂閱者。
• c 110ms發射的數據，與b間隔不小於50ms，不過濾，發送給訂閱者。

依此理論，一個心跳的服務大概是這個樣子：

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import { UserService } from './user.service';


/**
 * 心跳服務
 */
@Injectable({
  providedIn: 'root'
})
export class HeartbeatService {

  private interval = 15 * 60 * 1000; // 時間間隔
  private heartbeatSubject = new ReplaySubject<boolean>(1);

  constructor(private userService: UserService) {
    this.onInit();
  }

  /**
   * 初始化心跳功能
   * https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-auditTime
   * https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-throttleTime
   */
  onInit() {
    this.heartbeatSubject.asObservable().pipe(throttleTime(this.interval))
      .subscribe(() => {
        this.userService.sendHeartbeat();
      });
  }

  send(): void {
    this.heartbeatSubject.next();
  }
}

其它預發送心跳的組件直接調用send()方法即發成了心跳的發射。

auditTime與 throttleTime類似，推薦同步學習。

防抖 debounceTime

情景二：若是10分鐘內沒有監聽到用戶的操做，則彈出鎖屏界面。這功能使用防抖功能可以輕鬆的完成。

防抖功能的典型應用是實時查詢，好比用戶想搜索「河北工業大學」，實際的輸入過程是這樣：
「河」 -- 請求1次後臺（無用功）
「河北」 -- 請求1次後臺（無用功）
「河北工」 -- 請求1次後臺（無用功）
「...」 -- 請求1次後臺（無用功）
「河北工業大學」 -- 請求1次後臺（用戶想要的）

若是不加入防抖，那麼用戶每輸入一個字符都會請求一次後臺，則用戶輸入完「河北工業大學」後，則須要請求6次後臺。而用戶最終僅想查詢一次「河北工業大學」。假設用戶的輸入速度是1秒鐘一個字符，則能夠加入1秒的防抖 ---- 若是用戶在1秒內又從新輸入了新的字符，則忽略用戶前面輸入的；若是距離用戶的最後輸入時間大於1秒鐘，則按用戶最後的輸入發起請求。這樣便有效的規避了冗餘請求的問題。

再借用官方文檔的圖片：

如圖示：abcd的發射時間分別爲：0,30,40,65ms。debounceTime定義了防抖時間爲20ms，那麼：

• a 第0ms發射，並在且20ms內沒有新的要發射的內容，將數據發送給訂閱者。
• b 第30ms發射，但在20ms（確切的說是在間隔10ms時）內出現了新的發射內容c，將取消發送數據。
• c 第40ms發射，在20ms內沒有新的要發射的內容，將數據發送給訂閱者。
• d 第65ms發射，在20ms內沒有新的要發射的內容，將數據發送給訂閱者。

具體到鎖屏功能，大致上長這個樣子：

this.xxxxSubject.asObservable().pipe(debounceTime(10 * 60 * 1000))
      .subscribe(() => {
        if (用戶已登陸) {
          鎖屏
        }
      });

  send(): void {
    this.xxxSubject.next();
  }

總結

Rxjs的操做符有不少，當前階段只有想不到，沒有人家作不到(若是它還就真的沒作到，那麼咱們還能夠自定義操做符。同時還有機會爲Rxjs提交pull request而成爲Rxjs的代碼貢獻者)。

Rxjs中文 -- 防抖debounceTime

Rxjs中文 -- 節流throttleTime