手写Debounce 防抖函数遇到的坑

最开始写的防抖函数

  function debounce(fn, delay) {
    let timer;
    // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
    return function () {
      // 保存函数调用时的上下文和参数，传递给 fn
      let context = this
      let args = arguments
      // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
      clearTimeout(timer)
      // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
      // 再过 delay 毫秒就执行 fn
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }

写两个按钮来执行

<input type="button" value="触发按钮" onclick="btnclick()"/>
<input id="btn" type="button" value="监听按钮"/>

这里 问题就来了 比如点击两次 这样做的话就会出现 2秒之后 打印2次console

  function btnclick() {
    debounce(function () {
      console.log('触发按钮的点击事件')
    }, 1000)()
  }

但是下面这样写就是正确的 连续点击两次 最后一次点击两秒之后打印console

  let btn = document.getElementById('btn')
  btn.addEventListener('click', debounce(() => {
    console.log('监听按钮')
  }, 1000))

这里困惑了很久才发现 实际上事件监听相当于是吧debounce函数的返回值先拿到 再在点击的时候执行这个返回函数

而触发按钮是每次点击都会执行debounce这个函数 执行debouce就会初始化 let timer 下面的clearTimeout就没有办法清除定时器

解决办法: 直接把这个timer给this 每次执行的时候都不会初始化timer
当然 比较笨的办法就是先把debouce函数的返回函数缓存下来 点击的时候才执行

let d = debounce(function () {
console.log('事件函数')
}, 1000)

function btnclick() {
d()
}

  function debounce(fn, delay) {
    // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
    return function () {
      // 保存函数调用时的上下文和参数，传递给 fn
      let context = this
      let args = arguments
      // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
      clearTimeout(this.timer)
      // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
      // 再过 delay 毫秒就执行 fn
      this.timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }