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
