前端優化——節流函數

節流函數

在短期屢次觸發某個函數的場景下，對執行函數進行節流，節省無效浪費

1. 使用場景

• 如上圖場景下，每當改變搜索框內的內容時，都會實時進行Ajax請求，並把響應數據渲染到頁面，，用戶爲輸入想要搜索的內容可能須要屢次輸入，每次都去請求會形成一些沒必要要的浪費
• 因此應在源頭寫一個節流函數，當在預約的時間內屢次改變搜索框內容時，只對最後一次輸入的結果進行請求

export function debounce(fun, delay){
  let timer //定時器
  
  return function (...args){
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimerout(() => { // 
      fun.apply(this, args)
    }, delay)
  }
}

注：代碼來源vue-music音樂播放器項目

2. 函數調用

this.$watch(
  "query",
  debounce(newQuery => {
    // 不超過200ms函數節流
    this.$emit("query", newQuery);
  }, 200)
);

• 函數經過vue的 $watch 的實例方法調用，監聽input框的內容變化，執行this.$emit("query", newQuery);前給函數加個節流函數
• 設置200ms時間中input內容再也不變化再去請求數據

3. 誤區

• 在看到這樣寫時，沒明白debounce中的閉包函數是怎麼執行的，由於只是返回一個函數沒看到執行，，其實watch監聽時後面應該寫個匿名函數，當監聽變化時自動執行這個匿名函數，
  其實在debounce(newQuery,200)函數寫入時就已經執行這個函數，並把返回return的閉包函數等待執行
• (...args)表示當前函數執行傳的全部參數，放到watch的執行環境就表明new，old監聽變化的新舊兩個參數值，就是定時器中執行的那個箭頭函數的newQuery參數

博客原文地址
項目地址：vue-music音樂播放器項目