angular6学习笔记18：请求防抖

根据用户键盘对的输入，向远端服务器发送请求并返回数据，即：常见的搜索功能

<input type="text" #searchSource placeholder="请输入搜索的内容"(keyup)='search(searchSource.value)'>

在搜索时：input控件的(keyup) 事件绑定把每次击键都发送给了组件的 search() 方法。

如果每次击键都发送一次请求就太昂贵了。 最好是能等到用户停止输入时才发送请求。此时就可以用到请求防抖（使用 RxJS 的操作符实现）。

1. 引入相关的包

import {Subject} from 'rxjs/Subject';

2.声明变量

private searchTerms = new Subject<string>();

3.serach方法

search(serachParam: string) {
  this.searchTerms.next(serachParam);
}

4.请求防抖

ngOnInit(): void {
    this.searchTerms
      .pipe(
        // 请求防抖 300毫秒
        debounceTime(300),
        distinctUntilChanged())
      .subscribe(term => {
        // 此处进行httpClient的请求
        // term是用户输入的值
      });
  }

searchTerms 是一个序列，包含用户输入到搜索框中的所有值。 它定义成了 RxJS 的 Subject 对象，这表示它是一个多播 Observable，同时还可以自行调用 next(value) 来产生值，除了把每个 searchText 的值都直接转发给 httpClient

 之外

ngOnInit() 中的代码还通过下列两个操作符对这些搜索值进行管道处理：

1. debounceTime(300) - 等待，直到用户停止输入（这个例子中是停止 300ms）。

2. distinctUntilChanged() - 等待，直到搜索内容发生了变化。

这样，只有当用户停止了输入且搜索值和以前不一样的时候，搜索值才会传给服务，发送请求。