概述
說明
在項目過程中，經常會遇到一個按鈕被多次點擊并且多次調用對應處理函數的問題，而往往我們只需去調用一次處理函數即可。有時也會遇到需要在某一規則內有規律的去觸發對應的處理函數，所以就需要使用到函數防抖與函數節流來幫助我們實現我們想要的結果以及避免不必要的問題產生。
函數防抖(debounce)
定義：當持續觸發事件時(如連續點擊按鈕多此)，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，有一次觸發了事件，就重新開始延時。
原理：維護一個計時器，規定在延時時間后觸發函數，但是在延時時間內再次被觸發的話，就取消之前的計時器而重新設置，這樣就能夠保證只有最后一次操作被觸發。即將所有操作合并為一個操作進行，并且只有最后一次操作是有效操作。
函數節流(throttle)
定義：當持續觸發事件時，保證一定時間段內只調用一次事件處理函數，按照一定的規律在某個時間間隔內去處理函數。
原理：原理是通過判斷是否達到一定時間來觸發函數，使得一定時間內只觸發一次函數。
代碼
函數防抖
觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間
每次觸發事件時都取消之前的延時調用方法
function debounce(fn) { let timeout = null; // 創建一個標記用來存放定時器的返回值 return function () { clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉 timeout = setTimeout(() => { // 然后又創建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內如果還有字符輸入的話，就不會執行 fn 函數 fn.apply(this, arguments); }, 500); };}function sayHi() { console.log('防抖成功');}var inp = document.getElementById('inp');inp.addEventListener('input', debounce(sayHi)); // 防抖函數節流
高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率
每次觸發事件時都判斷當前是否有等待執行的延時函數
function throttle(fn) { let canRun = true; // 通過閉包保存一個標記 return function () { if (!canRun) return; // 在函數開頭判斷標記是否為true，不為true則return canRun = false; // 立即設置為false setTimeout(() => { // 將外部傳入的函數的執行放在setTimeout中 fn.apply(this, arguments); // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉 canRun = true; }, 500); };}function sayHi(e) { console.log(e.target.innerWidth, e.target.innerHeight);}window.addEventListener('resize', throttle(sayHi));以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
