利用throttle和debounce实现延迟请求

最新推荐文章于 2022-09-25 16:24:01 发布

weixin_33670713

最新推荐文章于 2022-09-25 16:24:01 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

文章标签：后端前端 python ViewUI

原文链接：https://my.oschina.net/zimingforever/blog/835489

本文探讨了前端搜索场景下如何减少无效请求的问题。通过使用throttle和debounce库来控制请求频率，确保只有在用户输入稳定一段时间后才向后端发送请求。文章提供了具体的代码示例并解释了两种方法的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

onSearch(value) {
  const props = this.props;
  if (this.timer) {
    clearTimeout(this.timer);
  }
  this.timer = setTimeout(() => {
    xxx
  }, 300);
}

这里介绍一个类库，利用throttle和debounce解决 https://www.npmjs.com/package/throttle-debounce

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

转载于:https://my.oschina.net/zimingforever/blog/835489