前端性能優化之防抖、節流

本篇主要封裝防抖、節流方法，并簡述它們的使用場景：

防抖：

/**
 * 如果短時間内觸發多次同一事件，隻執行一次
 * @param {*} callback callback: 需要處理的回調函數
 * @param {*} delay delay：期限
 * @returns 
 */
export function debounce(callback, delay) {
  return function (event) {

    // 如果上次事件還沒有真正處理, 取消它
    // if (callback.timeoutId) { // 會查找原型鍊
    if (callback.hasOwnProperty('timeoutId')) { // 不會查找原型鍊
      // 清除
      clearTimeout(callback.timeoutId)
    }

    // 發事件發生指定事件後才調用處理事件的回調函數
    // 啟動定時器, 隻是準備真正處理
    callback.timeoutId = setTimeout(() => {
      // 正在處理事件
      callback.call(this, event)
      // 删除準備處理的标記
      delete callback.timeoutId
    }, delay)
  }
}
           

場景：1輸入框的遠端搜尋，使用者在規定的時間内連續輸入文字不進行搜尋，當輸入完畢後，再進行搜尋

　　　2.表單操作，防止使用者短時間内輕按兩下或多次點選，造成重複送出

　　　3.window的resize事件，避免不斷調整視窗大小而一直觸發該事件，當調整結束後再調用該事件

節流：

/*
  如果短時間内觸發多次同一事件，那麼在函數執行一次之後，在規定時間内不再觸發，直至過了這段時間再次觸發
  callback: 傳入回調函數
  delay：間隔
 */
export function throttle(callback, delay) {
  let pre = 0 // 預設值不要是Date.now() ==> 第1次事件立即調用
  return function (event) { // 節流函數/真正的事件回調函數   this是發生事件的标簽
    const current = Date.now()
    if (current - pre > delay) { // 隻有離上一次調用callback的時間差大于delay
      // 調用真正處理事件的函數, this是事件源, 參數是event
      callback.call(this, event)
      // 記錄此次調用的時間
      pre = current
    }
  }
}
           

場景：1.輪播圖的翻頁，避免翻頁速度過快，影響頁面觀感

　　　2.window的scroll事件，每隔一段時間來觸發scroll事件

　　　3.表單的送出，修改表單的時候，讓其在一段時間内隻能修改一次，避免短時間内修改很多次

腳踏實地行，海闊天空飛