angular 8 debounceTime防抖（搜索功能）

該功能常見全局搜索中，不通過事件點擊/keyup.enter的方式，需要在input框中實時搜索查詢

眾所周知，每當keyup后就發送請求，會浪費不必要的性能，所以需要等待用戶停止輸入的時候發送請求；
===> 簡單理解，玩RPG游戲的時候，遇見小怪，就放一個超ex很不划算，所以就需要判斷遇見的怪物值不值得放ex；

 

這里使用debounceTime , 他可以做到等待一段時間后，再處理事件；並且是放在搜索文本框的上下文的地方，而不是請求服務的時候；

===> 比如，你看見一個小怪，放ex不划算，你可以聚怪呀，等聚一群怪物的時候，再放ex；
==> debounceTime(1000); // 等待1000m后，處理事情

例子：

<nz-input-group nzCompact nzSize="large">
        <nz-cascader [nzOptions]="selectData.list" [(ngModel)]="selectData.value" nzSize="large">
        </nz-cascader>
        <input
          type="text"
          nz-input
          placeholder="請輸入搜索值"
          [(ngModel)]="searchValue"
          (ngModelChange)="search($event)"
      
        />
        <button nz-button nzType="primary" nzSearch  nzSize="large">
          <i nz-icon nzType="search"></i>
        </button>
      </nz-input-group>

 

  searchValue: string;
  searchAnimate = false; // 控制簡潔搜索部分顯隱
  result$: Observable<any>; // 簡潔搜索可觀察對象，這里一般實際的時候會指定類型
  private searchText$ = new Subject<string>();
selectData = {
    list: [
      {
        value: 'jar',
        label: '組件',
        children: [
          {
            value: 'java',
            label: 'JAVA',
            isLeaf: true
          },
          {
            value: 'js',
            label: 'JS',
            isLeaf: true
          }
        ]
      }
    ],
    value: []
  };
constructor(
    private searchService: SearchService
  ) {}
  ngOnInit(): void {
    // 訂閱
    this.result$ = this.searchText$.pipe(
      debounceTime(1000), // 等待用戶停止輸入1000ms
      distinctUntilChanged(), // 等待搜索文本發生變化
      switchMap(data => { //將搜索請求發送到服務，
        console.log(data, this.selectData);
        return this.searchService.simpleSearchData({
          param: data,
          language: this.selectData.value[1]
        });
      })
    );
    this.result$.subscribe(params => {
      console.log(params);
      this.data = params.data || [];
      this.searchLoading = false;
    });
  }
 // 輸入框值變化 訂閱消息
  search(value: string) {
    if (this.selectData.value[0] === 'jar' && this.selectData.value[1] && value) {
      this.searchAnimate = true;
      this.searchLoading = true;
      this.searchText$.next(value);
    } else {
      this.searchAnimate = false;
      this.data = [];
    }
  }

效果：