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<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/