### 簡單了解 ***** * 防抖節流我相信大家都不陌生，簡單理解，可有效的規避很多重復性（誤）操作。 * 防抖：在規定時間內，操作時長間接性小于規定時間，只執行第一次或者最后一次；如：500ms執行一次，間接時間為100ms,一共操作時長2000ms，則會執行**1**次。 * 節流：規定時間內執行一次，操作時長大于規定時間，則開啟下一個執行；如：500ms執行一次，一共操作時長2000ms，則會執行**4**次。 ### 問題所在 ***** 問題：`clearTimeout(timeout)`后，`timeout=???`、以及定時器有什么變化？ 先簡單過一下 下面的代碼，平淡無奇哈，但是關鍵在于這句 `timeout?&&?clearTimeout(timeout)`，試想經過`clearTimeout(timeout)`后，`timeout=???`，等于`null`嗎？可以看到清除定時器后timeout的值并非null，而且還不變，這是不是有點匪夷所思啊？ * 接下來我們分析一下，我們開啟一個定時器，并且把這個定時器記錄賦給一個變量，這時候定時器在內存中，可以通過該變量對應id去查找到，經過`clearTimeout(timeout)`后，只是對內存中的定時器進行清除，僅此而已，并未對變量進行修改操作； * 如果我們直接進行`timeout=null`，而沒有`clearTimeout(timeout)`，那么定時器是沒有清除的，只是把timeout指向變了，并沒有清除掉定時器，此時定時器在內存中雖然沒有變量指向它，但它仍存在內存中，待wait時間一到，就執行callback函數。  ### 防抖函數實現 ``` /** ?*?防抖函數：多次觸發事件，事件處理函數只執行一次，并且在觸發操作后執行。 ?*?原理：利用閉包原理，就是函數需要在剛完成時需要被使用，賦值給一個變量，由這個變量去使用。 ?*?@param?{*}?callback?回調函數 ?*?@param?{*}?wait?延遲時間，默認500ms ?*?@param?{*}?immediate?是否立即執行，默認是 ?*/ export?const?debounce =?(callback,?wait?=?500,?immediate?=?true)?=>?{ ??let?timeout?=?null; ??let?debounced?=?function()?{ ????let?self?=?this; ????timeout?&&?clearTimeout(timeout); ????if?(immediate)?{ ??????let?callNow?=?!timeout; ??????if?(callNow)?callback.apply(self,?arguments); ??????timeout?=?setTimeout(()?=>?{ ????????timeout?=?null; ??????},?wait); ????}?else?{ ??????timeout?=?setTimeout(()?=>?{ ????????callback.apply(self,?arguments); ??????},?wait); ????} ??}; ??debounced.cancel?=?function()?{ clearTimeout(timeout); ????timeout?=?null; ??}; ??return?debounced; }; ``` ### 節流函數實現 順便附上節流函數 ``` /** ?*?節流函數：觸發操作后，在間隔連續時間內只執行一次，過了規定間隔時間后，才進行下一次調用 ?*?原理：對函數進行間隔操作，在規定間隔時間內，如有重復操作，則清除掉本次操作 ?*?@param?{*}?callback ?*?@param?{*}?wait?間隔時間，默認500ms ?*?@param?{*}?options?=?{?leading:?false,?//?禁用第一次執行?trailing:?false?//?禁用停止觸發的回調?} ?*?@returns ?*/ export?const?throttle?=?(callback,?wait?=?500,?options?=?{})?=>?{ ??let?time,?context,?args; ??let?previous?=?0; ??let?later?=?function()?{ ????previous?=?options.leading?===?false???0?:?new?Date().getTime(); ????time?=?null; ????callback.apply(context,?args); ????if?(!time)?context?=?args?=?null; ??}; ??let?throttled?=?function()?{ ????let?now?=?new?Date().getTime(); ????if?(!previous?&&?options.leading?===?false)?previous?=?now; ????let?remaining?=?wait?-?(now?-?previous); ????context?=?this; ????args?=?arguments; ????if?(remaining?<=?0?||?remaining?>?wait)?{ ??????if?(time)?{ ????????clearTimeout(time); ????????time?=?null; ??????} ??????previous?=?now; ??????callback.apply(context,?args); ??????if?(!time)?context?=?args?=?null; ????}?else?if?(!time?&&?options.trailing?!==?false)?{ ??????time?=?setTimeout(later,?remaining); ????} ??}; ??throttled.cancel?=?function()?{ ????clearTimeout(time); ????time?=?null; ????previous?=?0; ??}; ??return?throttled; }; ```