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

Question

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

```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)()
        }

```

Answer 1

该回答引用chatgpt:

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

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

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

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

btn.onclick = debounce(fn, 3000);

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