问题描述

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

有那么个函数叫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<any, any> {
   componentDidMount() {
        reaction(() => [this..mode, this.startTime, this.endTime],
          ([mode, start, end]) => {
            this. search()
      },
      true
    )
    }
    search() { ...}
    render() {
        return(
          <button onClick={this.search}> </button>
        )
    }
}

解决方法
为了避免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/