技術標籤：javascriptjavascript

我們在專案中都會遇到這樣的情況：

（1）實時搜尋功能，每按鍵一次就發一次請求，搜尋一個詞要在短時間內傳送十幾個請求

（2）使用者登入時，點選登入，沒有立刻反應，使用者就會頻繁點選登入按鈕，導致傳送多個請求

（3）監聽頁面滾動時，滾動一下也是要頻繁觸發事件，導致卡死

函式的節流和防抖就是解決這些問題的。

函式節流和函式防抖的理解

函式節流和函式防抖的程式碼實現

1，函式節流

首先設定一個變數標識，代表是否可以執行操作，設定延時器，每300毫秒可以執行一次操作，300毫秒內，不在重複執行。

  let isSend = false; // 函式節流使用
  handleInputChange(event) {
    if (isSend) {
      return
    }
    isSend = true;
    console.log('執行相應操作');
    // 函式節流
    setTimeout(() => {
      isSend = false;
    }, 300)
  }
 

2，函式防抖

首先設定一個延時器，進入方法後首先清除上一個延時器，只有在最後一次呼叫方法的時候，也就是300毫秒內延時器沒有被清除，才執行延時器內部的操作。

 let timer = null; // 延時器
  handleInputChange(event) {
    clearTimeout(timer); // 清除上一個延時
    
    // 函式防抖
    timer = setTimeout(() => {
      console.log('執行相應操作');
    }, 300)
  }

參考資料：https://www.cnblogs.com/walls/p/6399837.html