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 = [];
    }
  }

效果：