lodash中的debounce

问题描述

在阅读新项目代码的时候,发现了一个有趣的问题。问题大概可以这样描述:

有那么个函数叫search(),这个函数会发送API请求获取搜索后的结果。在我们的这个页面上,有很多种触发搜索api的可能,比如,点搜索按钮会触发去调用API,重制一些参数,会导致触发search(),因为我们的搜索是实时搜索,所以时间的变化也会触发搜索。所以会导致api会不停的被调用。

项目中使用了mobx里的reaction()来监听一些状态的变化,当状态变化时,触发搜索search(), 所以问题来了,在这个reaction里监听里一个时间状态。也就是说当我们点击搜索按钮,会触发search()函数,同时reaction()里监听的时间状态变化又会调用一次search()函数。导致多次api调用的问题。这如果放在angular里,再好解决了,因为angular2+的灵魂就是异步流。可以很简单的通过rxjs操作符来解决。

问题代码

@observer
export default class LogInsight extends React.Component {
   componentDidMount() {
        reaction(() => [this..mode, this.startTime, this.endTime],
          ([mode, start, end]) => {
            this. search()
      },
      true
    )
    }
    search() { ...}
    render() {
        return(
          
        )
    }
}

解决方法
为了避免search方法被多次不停的调用,项目中使用了lodash的debounce方法。

searchDebounced = debounce(this.search, 1)

关于debounce

我的理解,他与rxjs的debounce意义应该相同,当调用函数n秒后,才会执行该动作,若在这n秒内又调用该函数则将取消前一次并重新计算执行时间,举个简单的例子,我们要根据用户输入做suggest,每当用户按下键盘的时候都可以取消前一次,并且只关心最后一次输入的时间就行了。
如上面函数,意义就是,当调用函数1秒之后才会去调用this.search函数,若在一秒内this.search被重复调用,则取消上一次调用。
具体源码实现如下:https://www.cnblogs.com/wandiao/p/7223269.html
具体用法如下:http://lodashjs.com/docs/

你可能感兴趣的:(lodash中的debounce)