js 防抖

防抖：

简单地说，就是 当一个动作连续触发，只执行最后一次。

应用场景:

1. 搜索框搜索，我们只需要用户输完之后，再发送请求 oninput
2. 浏览器窗口大小变更，我们是不是可以等待变更完成之后再计算窗口大小，防止重复渲染
3. 文本编辑器的实时保存，无任何操作之后等待延迟时间进行保存
4. 比如某些应用的点赞功能，我们就需要点击之后立即生效，但是用户后续如果不停的点击我们就可以进行防抖操作
5. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖e
6. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

防抖

 <input type="text" name="" id="">
    <script>
        //防抖原理：简单的说，就是当一个动作连续触，只执行最后一次
        var inp = document.querySelector("input")
        inp.oninput = function(){
            console.log(this.value) //模拟业务逻辑
        }
        //发生连续事件，每一步都会触发程序。。。
    </script>

防抖初步解决

<input type="text" name="" id="">
    <script>
        // 若触发事件，给定一个setTimeOut定时器做延迟触发
        // 初始化定时器为null
        // 没吃点击，清楚且重置定时器
        // 最后一次点击，即n秒后执行业务逻辑

        var int = document.querySelector("input")
        var time = null
        int.oninput = function () {
            if (time != null) {
                clearTimeout(time)
            }
            time = setTimeout(() => {
                console.log(this.value)
            }, 1000)
        }

        //以上方法将防抖函数和业务逻辑放到一起，代码块不优雅，后期难以维护
    </script>

防抖优化

 <input type="text" name="" id="">
    <script>
        //将防抖函数与业务逻辑单独封装
        var int = document.querySelector("input")
        int.oninput = debounce(task, 1000)

        //业务逻辑
        function task() {
            console.log(this.value)
        }

        //防抖函数
        function debounce(fn, delay) {
            var time = null
            return function () {
                if (time != null) {
                    clearTimeout(time)
                }

                time = setTimeout(() => {
                    fn.call(this) //注：此处改变this指向，否则业务逻辑中的this指向window
                }, delay)
            }
        }

        
    </script>