### 前言 ***** 防抖節流是很常見的兩個函數，實現原理都應該是一樣的，關鍵怎么寫，下面是一個簡單的理解，想要更深入學習，可前往這里進行[查看](http://www.hmoore.net/vvmily_king/vvmily/2478592)。 ### 1、防抖 ***** 在一段時間（delay）內重復執行，則執行最后一次。 使用場景：返回頂部、縮放瀏覽器窗口視圖重繪等。 ``` // 具體原理，簡單實現 function debounce (fn,delay=300){ let clear = null return function() { if(clear) { // 只要還在持續中，則清除setTimeout clearTimeout(clear) clear = null } clear = setTimeout(fn,delay) } } ``` * 具體實現 ``` /** * 防抖函數：多次觸發事件，事件處理函數只執行一次，并且在觸發操作后執行。 * 原理：利用閉包原理，就是函數需要在剛完成時需要被使用，賦值給一個變量，由這個變量去使用。 * @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; }; ``` ### 2、節流函數 ***** 在連續執行過程中，每 delay時間內執行一次，所以整個操作會執行多次,約等`allTime / delay`次。 使用場景：鼠標拖動相關操作、縮放瀏覽器窗口視圖重繪等。 ``` // 簡單原理，方便閱讀理解 function throttle(fn,delay=300) { let isNot = true; return function() { if(!isNot){ return false // 在delay時間內，都不做處理 } isNot = false setTimeout(()=>{ fn() isNot = true },delay) } } ``` * 具體實現 ``` /** * 節流函數：觸發操作后，在間隔連續時間內只執行一次，過了規定間隔時間后，才進行下一次調用 * 原理：對函數進行間隔操作，在規定間隔時間內，如有重復操作，則清除掉本次操作 * @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; }; ```