一、常見的搜尋功能

<input nz-input [(ngModel)]="paramsChannelVo.name" (keyup)="getData(paramsChannelVo.name)" placeholder="系統名稱" />

input的keyup事件把每次按鍵彈起都發送給了 getData() 方法。

這樣一個繫結就造成了，每輸入一個字元就會進行一次搜尋，如果使用中文輸入法，最後回車寫入中文時，又有可能造成不會進行搜尋

所以最好是能等到使用者停止輸入時才傳送請求。此時就可以用到請求防抖（使用 RxJS 的操作符實現）。

二、如何使用防抖功能

1、component.js中引入rxjs/Subject

import {Subject} from 'rxjs/Subject';
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';

2、宣告變數

private getDataTerms = new Subject<string>();

這個string通常是[(ngModel)]繫結的值的型別

3、keyup繫結的getData方法

getData(value: string) {
  this.getDataTerms.next(value);
}
 

4、請求防抖

ngOnInit(): void {
    this.getDataTerms
      .pipe(
        // 請求防抖 300毫秒
        debounceTime(300),
        distinctUntilChanged())
      .subscribe(term => {
        // 此處進行httpClient的請求
        // term是使用者輸入的值
				this.getDataList();
      });
  }
	
	getDataList(){
			// 此處進行httpClient的請求
	}
	

5、說明

ngOnInit() 中的程式碼還通過下列兩個操作符對這些搜尋值進行管道處理：

• debounceTime(300) - 等待，直到使用者停止輸入（這個例子中是停止 300ms）。

• distinctUntilChanged() - 等待，直到搜尋內容發生了變化。

getDataTerms 是一個序列，包含使用者輸入到搜尋框中的所有值。 它定義成了 RxJS 的 Subject 物件，這表示它是一個多播 Observable，同時還可以自行呼叫 next(value) 來產生值

這樣，只有當用戶停止了輸入且搜尋值和以前不一樣的時候，搜尋值才會傳給服務，傳送請求，避免每次輸入字元都進行 httpClient請求

三、將防抖功能定義為一個指令

未完待續。。。

個人部落格 蝸牛