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

 

转载于:https://www.cnblogs.com/darkbluelove/p/11338233.html