## debounce + [link](./debounce "Link to this entry.") + [source](https://github.com/lodash/lodash/blob/4.5.0正式版/lodash.src.js#L8616 "View in source.") + [npm](https://www.npmjs.com/package/lodash.debounce "See the npm package.") ``` _.debounce(func, [wait=0], [options]) ``` 創建一個防抖動函數。 該函數會在 `wait` 毫秒后調用 `func` 方法。 該函數提供一個 `cancel` 方法取消延遲的函數調用以及 `flush` 方法立即調用。 可以提供一個 `options` 對象決定如何調用 `func` 方法， options.leading 與|或 options.trailing 決定延遲前后如何觸發。 `func` 會傳入最后一次傳入的參數給防抖動函數。 隨后調用的防抖動函數返回是最后一次 `func` 調用的結果。 **注意:** 如果 `leading` 和 `trailing` 都設定為 true。 則 func 允許 trailing 方式調用的條件為: 在 wait 期間多次調用防抖方法。 查看 [David Corbacho's article](http://drupalmotion.com/article/debounce-and-throttle-visual-explanation) 了解 `_.debounce` 與 `_.throttle` 的區別。 ### 參數 1. func (Function) 要防抖動的函數 2. [wait=0] (number) 需要延遲的毫秒數 3. [options] (Object) 選項對象 4. [options.leading=false] (boolean) 指定調用在延遲開始前 5. [options.maxWait] (number) 設置 `func` 允許被延遲的最大值 6. [options.trailing=true] (boolean) 指定調用在延遲結束后 ### 返回值 (Function) 返回具有防抖動功能的函數 ### 示例 ``` // 避免窗口在變動時出現昂貴的計算開銷。 jQuery(window).on('resize', _.debounce(calculateLayout, 150)); // 當點擊時 `sendMail` 隨后就被調用。 jQuery(element).on('click', _.debounce(sendMail, 300, { 'leading': true, 'trailing': false })); // 確保 `batchLog` 調用1次之后，1秒內會被觸發。 var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); var source = new EventSource('/stream'); jQuery(source).on('message', debounced); // 取消一個 trailing 的防抖動調用 jQuery(window).on('popstate', debounced.cancel); ```