js節流和防抖的實現及應用場景

防抖和節流目的：都是優化高頻率觸發執行js代碼的一種手段

防抖

觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，那麼就會重新計算時間

實現：每次觸發事件時設置一個延遲調用方法，並且取消之前的延時調用方法
缺點：如果事件在規定的時間間隔內被不斷的觸發，則調用方法會被不斷的延遲

應用場景

1.輸入框搜索：一般的輸入框綁定輸入事件，每次觸發就要請求接口的話，會給服務器帶來巨大的壓力，所以會用到防抖
規定時間爲200ms，當輸入後200ms沒有操作，纔會觸發接口
2.窗口resize。只需窗口調整完成後，計算窗口大小。防止重複渲染

function debounce (fn) {
  let timerout = null
  return function () {
    let args = arguments
    let self = this
    clearTimeout(timerout)
    timerout = setTimeout(() => {
      fn.apply(self, args) // 傳參數
    }, 200);
  }
}
window.addEventListener('scroll', debounce(function () {
  console.log(1)
}))

節流

規定在n秒內，只能觸發一次函數。如果在n秒內觸發多次函數，只有一次生效

實現：當觸發事件時，判斷有沒有正在執行的函數，直接return

應用場景

1.高頻點擊提交，表單重複提交

function throttle (fn) {
  let timerout
  return function () {
    let args = arguments
    let self = this
    if (timerout) return
    timerout = setTimeout(() => {
      fn.apply(self, args)
      timerout = null 
    }, 200);
  }
}
window.addEventListener('resize', throttle(function () {
  console.log(1)
}))