项目需求：

　　全局搜索 + 防抖 提高性能

技术：

　　[(ngModel)]  [(ngModelChange)]  Rxjs( Subject)

代码展示： 

// html 

// xx.component.tsimport { Observable, combineLatest, Subject } from 'rxjs';import { distinctUntilChanged, debounceTime } from 'rxjs/operators';private searchStream = new Subject
     
      ();ngOnInit() {
    // 订阅    this.initGlobalSearchSubscription();}  ngOnDestroy() {
    // 取消订阅    this.searchStream.unsubscribe();  }  private async initGlobalSearchSubscription() {    this.projectId = await this.localStorageService.getItem('currentProject');    this.searchStream.pipe(      debounceTime(400),      distinctUntilChanged())    .subscribe(async(searchContent) => {
          const searchResult = await this.projectService.globalSearch(this.projectId, searchContent).toPromise();      this.searchMenuList = searchResult.body;    });  }  private globalSearch() {
    　　// 消息发送    this.searchStream.next(this.globalSearchContent);  }
     

具有防抖和截流的第三方库：

个人对截流和防抖的理解：

防抖：当连续操作停止的时间超过规定的等待时间后，回调函数才会被调用。比如：停止输入后一段时间，回调函数才会触发。

截流：在连续操作的这段时间内，回调函数在规定的时间段内才会被调用。比如：连续拖拽，回调函数只会每个一段时间触发一次