这里debounce是引用的lodash库;
import {debounce} from 'lodash';
下面就可以使用debounce了。
场景:input框每次值改变的时候,其下面会出现一个下拉列表(这是通过调用后端接口获得的数据),但是不想每次input值改变的时候都要重复调用一下接口,不然接口调用的太频繁,又可能导致网络卡死,可以在inputinput框每次值改变的时候,设定一个时间300ms,如果在这期间input的value值变化,不会重复调用接口,超过300ms才会调用接口。大致思路如下:
<input
type="text"
autocomplete="on"
id="test"
oninput="inputChange()" />
<script>
var self = this;
function inputChange = function(e) {
self.inputValue = e.target.value;
self.debounceSearch(e);
}
self.debounceSearch = debounce(self.search, 300);
function search() {
console.log(46);
// 接口返回下拉框list结果
...
}
其中debounce还有第三个参数true或false,true表示会在delay时间间隔的开始时立即调用这个函数,false表示不会在delay时间间隔的开始时立即调用这个函数,默认为true。