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