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)
  });
}