首先， 防抖是面試中的常見問題，而項目中也會有很多地方可以用到。抱着學習的心態寫了一個防抖函數， 有不足之處，請大佬指教！

定義：多次觸發事件時, 只執行一次回調,在事件被觸發n秒後執行回調 , 如果在n秒內再次觸發則重新計算

總而言之： 防抖的結果是, 事件只會執行一次

代碼如下：

<body>
  <input type="text"  id="input">
</body>

<script>
function debounce(fn, delay) {
  console.log(arguments);
  let timer = null
  return function() {
    clearTimeout(timer)   // 每次清除定時器，防止定時器累加
    timer = window.setTimeout(()=>{
      fn.apply(this, arguments)   
    }, delay)
  }
}

let fn = debounce(function(e) {
  console.log('防抖成功', e.target.value);
}, 1000)

document.getElementById('input').addEventListener('input', fn)

</script>

其中， arguments有點不是很明白， 順便寫了自己的理解， 希望大佬們指正

在函數調用的時候，瀏覽器每次都會傳遞進兩個隱式參數

  1. 函數的上下文對象this
  2. 封裝實參的對象arguments
function fun(){
  console.log(arguments);
}
fun('tom',[1,2,3],{name:'Janny'});

看到下面打印出來的結果，arguments是有值的，它的值就是我們傳遞進去的參數，雖然我們沒有給fun函數定義形參，但是我們還是可以通過arguments來調用傳遞給函數fun的實參。

js如何在request中做防抖處理_#js


簡單的理解：每個函數都有一個arguments屬性，表示函數的實參集合，這裏的實參是重點，就是執行函數時實際傳入的參數的集合。

此處arguments理解不是很透徹， 希望大佬指正

參考文檔：https://www.jianshu.com/p/d7ed5ade67a3