以很高的频率触发防抖函数，刚开始控制台不会输出内容，防抖函数是生效的，持续短暂的时间后就会发现控制台一直在输出内容，就是说明防抖函数在这个情况下失效了

以很高的频率触发防抖函数，刚开始控制台不会输出内容，防抖函数是生效的，持续短暂的时间后就会发现控制台一直在输出内容，就是说明防抖函数在这个情况下失效了，请问是为什么



```javascript
var btn = document.getElementById('btn');
        function debounce (fn, delay) {
            let timer = null
            return function () {
                // 在规定时间内再次触发会先清除定时器后再重设定时器
                // console.log(timer)
                clearTimeout(timer);
                timer = setTimeout(function () {
                    // console.log(this, timer)
                    fn.apply(this, arguments);
                }, delay);
            }
        }
        function fn () {
            console.log('防抖')
        }
        // 就是这一行
        btn.onclick = function () {
            debounce(fn, 3000)()
        }

```

该回答引用chatgpt:

根据您提供的代码，问题出在这一行：


btn.onclick = function () {
    debounce(fn, 3000)()
}

这里没有将防抖函数返回的函数保存下来，而是直接执行了一次，所以每次点击按钮的时候都会重新创建一个防抖函数并立即执行，而防抖函数的作用是在一定时间内不执行函数，如果频繁调用的话就相当于没有起到防抖的作用。

可以将这一行代码修改为：


btn.onclick = debounce(fn, 3000);

这样，每次点击按钮时都会执行防抖函数返回的函数，而不是重新创建一个函数并立即执行。

你好 你没有清除之前的定时器


```javascript
  var btn = document.getElementById('btn');
  let timer = null
  function debounce(fn, delay) {
    return function () {
      // 在规定时间内再次触发会先清除定时器后再重设定时器
      // console.log(timer)
      if (timer){
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        // console.log(this, timer)
        fn.apply(this, arguments);
      }, delay);
    }
  }
  function fn() {
    console.log('防抖')
  }
  // 就是这一行
  btn.onclick = function () {
    debounce(fn, 3000)()
  }

```

每次点击的时候timer都是一个新的，并不是之前的，所以导致防抖失效，仍然会触发多次。
需要将timer提升一级。

<script>
      var btn = document.getElementById("btn");
      let timer = null;
      function debounce(fn, delay) {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          fn.apply(this, arguments);
        }, delay);
      }
      function fn() {
        console.log("防抖");
      }
      // 就是这一行
      btn.onclick = function () {
        debounce(fn, 3000);
      };
    </script>