java实现debounce_利用throttle和debounce实现延迟请求

当你在前端点击一个搜索往后面发送请求的时候会触发一个像后端的请求，当你不在前端做一些控制的时候，就会发现会发送特别多的请求

比如一个人员搜索,虽然前端控制了当搜索字符大于3个字的时候才发送，但是后续还是会出现如下问题。

以前的实现方式比较挫，定义一个timer，当请求结束后清除timer，再继续发送请求，避免一次发送多个请求

onSearch(value) {

const props = this.props;

if (this.timer) {

clearTimeout(this.timer);

}

this.timer = setTimeout(() => {

xxx

}, 300);

}

throttle的原理如下

无论提交如何频繁，任意两次有效提交的间隔时间必定会大于或等于某一时间间隔；即以一定频率提交。

module.submit = throttle(150, function() {

// todo})

如果客户发送每隔100毫秒发送过来10次请求，此模块将只接收其中6个(每个在时间线上距离为150毫秒)进行处理。

debounce的原理如下

任意两次提交的间隔时间，必须大于一个指定时间，才会促成有效提交；即不给休息不干活。

module.submit = debounce(150, function() {

// todo})

利用debounce更改新代码

function handleUserSearchChange(value) {

dispatch({

type: 'implatation/userSearch',

payload: {

searchText: value,

},

});

}

onSearch={debounce(1000,handleUserSearchChange)}