前端防抖與節流

  函數防抖與節流印象中都是爲了控制函數執行頻率，好比避快速點擊提交按鈕屢次提交、避免模糊搜索框keyup事件監聽時快速打字每次都去調用一次查詢接口、避免頁面滾動監聽事件快速執行影響性能等；以前對防抖和節流的具體概念缺少了解，好比他們有啥區別？具體是怎麼樣的？如何方便的理解這兩個概念？翻了翻資料，結合本身的理解與思考整理以下

防抖

名詞解釋

觸發高頻事件後n秒內函數只會執行一次，若是n秒內高頻事件再次被觸發，則從新計算時間

example1: 模糊搜索框keyup事件監聽，始終要等到用戶輸入告一段落後纔會執行數據查詢
example2: 遊戲釋放技能有一個準備時間，當準備階段被打斷時，須要從新走技能準備，準備完成纔可以釋放技能

代碼實現

/** * 防抖 * @param fn 須要作防抖處理的函數 * @param delay 技能準備（延遲）執行時間 * @returns {Function} */
function debounce(fn, delay = 500) {
  let time = null
  return function() {
    clearTimeout(time)
    time = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}
// 只會打印debounce2
const debounceTest = debounce((param) => { console.log(param) })
debounceTest('debounce1')
debounceTest('debounce2')
複製代碼

節流

名詞解釋

高頻事件觸發，但在n秒內只會執行一次

example1：查詢按鈕，第一次能夠當即點擊，防止快速點擊控制3s以內只能點一次
example2：遊戲技能冷卻，可用時隨時可當即執行，當執行後有一個冷卻時間

代碼實現

/** * 節流 * @param fn 須要作節流處理的函數 * @param limit 技能的冷卻（限制）時間 * @returns {Function} */
function throttle(fn, limit = 500) {
  let flag = true
  return function() {
    if (flag) {
      fn.apply(this, arguments)
      flag = false
      setTimeout(() => { flag = true }, limit)
    }
  }
}
// 只會打印throttle1
const throttleTest = throttle((param) => { console.log(param) })
throttleTest('throttle1')
throttleTest('throttle2')
複製代碼