js中防抖的实现

先介绍一下什么是抖动，当我们编写一个输入框，监听这个输入框时，每次输入一个内容都会触发这个函数，这个就是抖动。很多时候我们不想要这个抖动，就要想办法防抖，防止一个函数，短时间内多次被触发，希望抖动结束执行一次。以上就是防抖的介绍，下面通过实例来展示

没有防抖处理 的效果

 let ipt = document.querySelector("input");

        ipt.oninput = function () {
            console.log('input');
            box()
        }
        function box() {
            console.log('检查用户的输入');
        }

 加入防抖之后的效果

let ipt = document.querySelector("input");

        // 定义一个变量，flag 记录一个状态
        // 保存的 延时器的返回值
        let flag = null;
        ipt.oninput = function () {
            console.log('input');

            /*
                第一次 清空一个 null的延时器
                同时启动 一个延时器，返回值 存入flag

                如果1000内 又触发了input事件。
                清空上一次延时器，
                同时启动 一个新的延时器，返回值 存入flag

                直到 连续的抖动 结束 ，1000后就会执行box函数

            */
            clearTimeout(flag);
            flag = setTimeout(() => {
                box()
            }, 1000);
            
        }
        function box() {
            console.log('检查用户的输入');
        }

 通过防抖处理，连续多次短时间输入也只执行一次。主要应用场景：比如 登录，验证码， input中输入联想查询，浏览器窗口拖动变化等等。