详细讲解前端中的防抖函数

防抖函数是一种在高频事件触发后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间的函数。这种函数在处理一些需要高频触发DOM事件的地方非常有用，例如按钮点击，滚动条滚动等。

防抖函数的基本实现思路是这样的：

1. 每次触发事件时都取消之前的延时调用方法
2. 然后重新设置一个新的延时调用

这样的话，如果在一个事件被频繁触发的情况下，该方法只会在最后一次事件触发后的n秒才会执行。
 

        let input = document.querySelector('input');  //获取input标签
        function output() {
            console.log(input.value);
        }
        function debonce(func, delay) {
            let timer;
            return function () {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    func.call(this)
                }, delay)
            }
        }
        input.addEventListener('input', debonce(output, 2000));

这个防抖函数接收两个参数：func是需要防抖的函数，delay是延时的时间。函数内部定义了一个变量timer，用来保存定时器的id。

这个防抖函数返回了一个新的函数。当这个新的函数被调用时，它首先会清除当前的定时器（如果存在的话），然后设置一个新的定时器，在delay毫秒后执行func函数。

这里的setTimeout函数中，func.call(this)确保了func函数在执行时this的指向。this在这里指的是调用防抖函数的上下文。因为setTimeout是window对象的方法，如果直接调用func()，那么func内部的this会指向window。通过使用call方法，我们可以将this的指向改为原来的上下文。

例如，如果我们在一个对象的方法中使用了这个防抖函数，那么this就会指向这个对象。这样我们就可以在func函数中正确地访问这个对象的属性和方法。

总结一下，这个防抖函数的运行过程是这样的：

1. 调用防抖函数，传入需要防抖的函数func和延时时间delay。
2. 防抖函数返回一个新的函数。
3. 当新的函数被调用时，清除当前的定时器，并设置一个新的定时器，在delay毫秒后执行func函数。
4. 如果在delay毫秒内，新的函数被再次调用，那么清除当前的定时器，并重新设置定时器。
5. 只有在最后一次调用新的函数后的delay毫秒后，func函数才会被执行。