為提升約玩原始碼的系統效能，需要做好節流和防抖

為了提升約玩原始碼的系統可用性，減少由於網路不穩定對使用者使用造成的影響，需要我們在約玩原始碼開發時，實現前端的接流和防抖，具體的實現程式碼如下：

防抖

定義

在約玩原始碼中事件觸發一定時間後執行回撥，如果這段時間再次觸發該事件，則重新計算時間。

看過一個經典的解釋： 函式防抖就是法師發技能的時候要讀條，技能讀條沒完再按技能就會重新讀條。

實現

export function debounce(fn, wait) {
  let timer = null;
  return function () {
      const context = this
      const args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

應用場景

約玩原始碼中的無按鈕搜尋框

如果我們不新增防抖，那麼每次輸入內容都會調取回撥，這明顯是不合理的，我們只需要在輸入完畢後呼叫回撥函式。

那麼我們新增防抖函式，停止輸入 500ms 後調取回撥，避免重複進行無用呼叫。

//模擬一段ajax請求 
function ajax(content) { 
    console.log('ajax request ' + content) 
}
function debounce(fun, delay) {
    return function (args) {
        // 清除定時器，id是上一次呼叫 setTimeout 時返回的 id
        clearTimeout(fun.id) 
        fun.id = setTimeout(() => { 
            fun.call(this, args) 
        }, delay) 
    } 
} 
// 建立防抖 ajax介面請求 500 延遲時間
let debounceAjax = debounce(ajax, 500)
let inputb = document.getElementById('debounce') 
inputb.addEventListener('keyup', function (e) { 
    debounceAjax(e.target.value) 
})

節流

定義

在約玩原始碼中事件在一個時間段內多次觸發，只有第一次觸發事件執行回撥。

實現

export function throttle(fn, gapTime) {
  let _lastTime = null;
  return function () {
    // + new Date() 將時間轉換成秒
    // + 將元素轉換為 Number 型別
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}

應用場景

滑鼠滾動條

如果我們不新增節流，那麼在約玩原始碼中，滑鼠滾動中會不停觸發滾動事件，如果這裡我們進行一些操作，會導致效能降低。

那麼我們在約玩原始碼中新增節流函式，在 1s 內重複觸發回撥，只有第一次觸發會呼叫回撥，就避免了不停觸發事件的問題。

以上便是“提升約玩原始碼系統效能，節流和防抖如何實現？”的全部內容，希望對大家有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：