技術標籤：javascript

聊一聊函式防抖和函式節流

在日常的“敏捷開發”，一味地為了快速的完成需求，其中遇到一個以前經常需要做到的而又懶得去優化的需求–滑動載入更多資料，也就是分頁。算是腦抽啥的想優化一下程式碼效能。於是就想到了函式防抖和函式節流的應用場景和原理。
對於大多數人來說，這可能都是用到爛的技術。只能感慨一句。

那麼廢話少說，我們先來了解一下這兩個分別的概念

概念

函式防抖(debounce)

函式防抖是指觸發事件後在一定的時間內，函式只能執行一次，如果在這個時間段內重新觸發事件會重新計算執行時間。簡單來說，就是一定時間內連續多次觸發事件，方法只在最後一次觸發事件的時候執行。

函式節流(throttle)

函式節流是指預先設定一個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下一個新週期。簡單來說，就是限制一個方法在一定時間內執行一次。

常用的應用場景

函式防抖(debounce)

• 根據輸入的內容檢索，當一定時間內沒有輸入，執行檢索結果的展示。
• 調整視窗的大小，當一定時間內沒有調整，計算視窗的大小。
• 多次點選按鈕，當一定時間內執行執行一次點選事件。
  函式節流(throttle)
• 滾動載入更多資料，監聽到滾動到底部載入資料
• 搜尋聯動

實現原理

使用定時器實現的函式防抖

function debounce(fn, delay = 500){
  let timer =
 
 null;
  return function () {
    if(timer){
      clearTimeout(timer);
    }
    timer = setTimeout(()=>{
      fn.apply(this, arguments)
      timer = null
    }, delay);
  };
};

// 應用例子 輸入框輸入檢索
let input = document.getElementsByTagName('input')[0];
input.addEventListener('keyup', debounce(function
 
 (){
  console.log(this.value)
}, 500))

通過閉包標記儲存setTimeout，每當使用者輸入的時候把前一個setTimeout清除掉，在建立一個新的setTimeout，保證輸入字元後在一定的時間間隔內如果還有字元輸入就不執行fn方法。

使用定時器實現的函式節流

function throttle(fn, delay = 100) {
  let timer = null
  return function () {
    if(timer){
      return
    }
    timer = setTimeout(()=>{
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}
// 應用例子 判斷滾動到底部
window.addEventListener('scroll', throttle(function (){
  let scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight
    || document.body.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight
    || document.body.scrollHeight;
  if (scrollTop + clientHeight === scrollHeight) {
     console.log('end');
  }
}, 100))

通過閉包標記儲存setTimeout，每當使用者滾動的時候判斷是否有標記存在，存在則return跳過，不存在則標記一個setTimeout並在回撥方法執行後將標記重置為null。

異同比較

相同點

• 通過 setTimeout 實現
• 目的都是為了降低執行頻率，節省計算資源
  不同點
• 函式防抖在一段連續操作結束後處理回撥。函式節流在一段連續操作中，每隔一段時間執行一次。

好了，以上就是這次整理的關於函式節流和函式防抖的理解，希望能給大家一點幫助，臨近年底，先祝大家kpi滿滿，年終豐收，我們下期再見。