rxjs debounceTime减小搜索的频率

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

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

html:

<div class="autocomplete">
  <input class="input" type="search" id="search" autocomplete="off" placeholder="autocomplete">
  <ul id="suggest-list" class="suggest"></ul>
</div>

js代码: 

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

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

const input = document.querySelector('#search');
const suggestList = document.querySelector('#suggest-list');
const input$ = fromEvent(input, 'input');
input$.pipe(
  filter(e => e.target.value.length > 1),
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(
    e => from(getSuggestList(e.target.value)).pipe(retry(3))
  )
).subscribe((val)=>console.log(val))


function getSuggestList(val){
  return new Promise(function(resolve, reject){
    //异步操做
    setTimeout(()=>{
      resolve([
        {
          name:'张三1',
          age:21
        },{
          name:'张三2',
          age:22
        },{
          name:'张三3',
          age:23
        },{
          name:'张三4',
          age:24
        },{
          name:'张三5',
          age:25
        }
      ]);
    },2000)
  });
}