防抖（Debounce）和節流（Throttle）是前端開發中常用的一種技術，主要用于優化性能和提升用戶體驗。

防抖（Debounce）

理解：在事件被觸發 n 秒后再執行回調，如果在這 n 秒內事件又被觸發，則重新計時。

實現：通過設置定時器實現。當事件觸發時，定時器到達指定時間后執行操作。如果在定時器到達之前再次觸發事件，則清除之前的定時器并重新設置一個新的定時器，然后重新計時。?

應用場景：輸入框搜索、窗口大小調整、按鈕點擊、滾動條滾動等。

// 定義防抖函數
function debounce(fn, delay) {
  let timer = null
  return function () {
    const _self = this
    const args = arguments
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(_self, args)
    }, delay)
  }
}

// html部分
<input type="text" id="inp" placeholder="請輸入搜索" />

// 使用防抖函數
const inp = document.getElementById('inp')
inp.oninput = debounce(onInputChange, 1000) // 輸入框輸入時，1秒后執行onInputChange函數
function onInputChange(e) {
  console.log(e.target.value)
}

節流（Throttle）

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

實現：可以通過定時器實現。首次觸發時設置定時器，定時器到達時間后執行操作，而且定時器清空。如果在定時器到達前再次觸發事件，則無視此次觸發事件。?

應用場景：拖拽、鼠標移動、表單驗證等

// 節流函數
function throttle(fn, delay) {
  let timer = null
  return function () {
    const _self = this
    const args = arguments
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(_self, args)
      timer = null
    }, delay)
  }
}

// html部分
<input type="submit" value="提交" onclick="onSubmit(event)" /

// 使用節流函數
function submitEvent(e) {
  console.log(e.target.value)
}
const onSubmit = throttle(submitEvent, 1000) // 點擊提交按鈕，1秒內只能提交一次

從上面的代碼可以看出，防抖與節流都是基于閉包來實現的。