1. 防抖函式

為什麼需要防抖

先看這樣一個例子: 我們需要根據使用者的輸入來想後臺請求不同的資料

但是如果不設定某種規則, 而是當用戶輸入一個字元就傳送一次請求, 這對於伺服器的壓力無疑是巨大的

    // 需求: 獲取使用者輸入的內容, 並返回相應的結果

    var input = document.querySelector('input')

    function getDate(value) {
      console.log('ajax: ', value);
    }

    input.addEventListener("keyup", function (e) {
      getDate(e.target.value)
    })
 

那能不能當我們輸入完以後, 再去呼叫請求函式向後臺傳送請求呢?

答案當然是可以的, 其中一種解決方案就是 使用防抖函式

什麼是防抖函式

防抖函式是閉包的一個應用

在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計時

也就是說, 防抖函式設定了這樣一個規則: 我們設定一個定時器, 當事件被觸發後的n秒後, 我們再去執行後續的操作, 比如傳送網路請求, 但是如果在這n秒內, 事件又被觸發一次, 那麼定時器要重新計時, 重新在n秒後再去執行後續操作

舉個例子

我們打遊戲點了回城按鈕 (觸發事件)以後, 要等待10秒 (延時時間)才能進行傳送 (後續操作), 但是如果倒計時在4s的時候, 我們又點選 (倒計時內再次觸發)

var input = document.querySelector('input')

function getDate(value) {
  console.log('ajax: ', value);
}


function debounce(callBack, delay) {
  var timer;
  return function (value) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      callBack(value)
    }, delay)
  }
}

var debounceInput = debounce(getDate, 1000)
input.addEventListener("keyup", function (e) {
  debounceInput(e.target.value)
})
 

2. 節流函式

為什麼需要節流

看這樣一個需求: 當我們點選註冊按鈕, 則向伺服器提交表單資訊

// 需求: 點選按鈕, 提交資訊
var btn = document.querySelector('button')

btn.addEventListener('click', function () {
  console.log('提交註冊資訊', new Date());
})

這裡有一個很大的問題, 就是沒有對按鈕的點選事件進行妥善的處理, 導致每點選一次按鈕, 就會發送一次表單提交, 這顯然是不合理的

當然, 我們可以通過禁用來解決, 而這裡我們可以用另外一種思路來解決

那就是 通過節流函式

什麼是節流函式

規定在一個單位時間內，只能觸發一次函式。如果這個單位時間內觸發多次函式，只有一次生效。

簡單理解: 觸發一個事件後, n秒內進行觸發動作, 不會進行事件處理, 而是要等n秒後, 上一個事件處理完成後, 再進行觸發

例子

​ 這次以銀行櫃檯辦理業務為例, 5分鐘辦理一位, 5分鐘之內哪怕後面的人再催, 也無法為其辦理業務, 必須要等5分鐘結束以後, 才能為下一位辦理業務

// 需求: 點選按鈕, 提交資訊, 在3秒內再次點選, 不生效
var btn = document.querySelector('button')

function submit() {
  console.log('提交註冊資訊', new Date());
}

function throttle(callBack, delay) {
  var timer;
  return function () {
    if (!timer) {
      callBack()
      timer = setTimeout(function () {
        timer = null
      }, delay)
    }
  }
}

var throttleBtn = throttle(submit, 3000)
btn.addEventListener('click', function () {
  throttleBtn()
})