rxjs debounceTime减少搜索的频率

debounceTime用来降低事件的触发频率 ,接收以毫秒为单位的参数

它所做的操作是，在一定时间范围内不管产生了多少事件，它只放第一个过去，剩下的都将舍弃

html:

<div class="autocomplete">
  <input class="input" type="search" id="search" autocomplete="off" placeholder="autocomplete" oninput="search(this.value)">
</div>

js代码: 

getSuggestList 是一个发送 ajax 请求的方法，返回 promise，我们使用 from 来将其转化为 Observable。 
为了优化请求，首先 e.target.value 是空字符串时不应该发送请求，
然后可以使用 debounceTime 减少触发频率，也可以使用 distinctUntilChanged 操作符来表示只有与上次不同时才去发送请求。
我们还可以在 API 失败时重试 3 次。

import { fromEvent,Subject,Observable,from } from 'rxjs';
import { debounceTime,map,distinctUntilChanged,switchMap} from 'rxjs/operators'; // merge

var searchItems = new subject(); // 接受字符串

function search(value){
    this.searchItems.next(value)
}

searchItems.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(
    e => from(getSuggestList(e)).pipe(retry(3))
  ).subscribe((val)=>console.log(val))
)


function getSuggestList(val){
  return (new Promise(function(resolve, reject){
    //异步操作
    setTimeout(()=>{
      resolve( [
        {id:1,name:"张三1"},
        {id:2,name:"张三2"},
        {id:3,name:"张三3"},
        {id:4,name:"张三4"},
        {id:5,name:"张三5"},
        {id:6,name:"张三6"},
        {id:7,name:"张三7"},
        {id:8,name:"张三8"},
        {id:9,name:"张三9"},
        {id:10,name:"张三10"},
      ]);
    },2000)
  });
}