JS中的防抖和节流

防抖

防抖：防止一个函数，短时间内多次被触发，希望抖动结束执行一次。

抖动： 一个函数 短时间内被多次执行。

input输入框防抖实例：

html：

<input type="text" name="" id="">
    

js：

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
        /*
            防抖--防止一个函数，短时间内多次被触发，希望抖动结束执行一次
               抖动 一个函数 短时间内被多次执行
        */
        let ipt = document.querySelector("input");

        // 定义一个变量，flag 记录一个状态
        // 保存的 延时器的返回值

        // 接收 两个参数 -一个 抖动结束要执行的函数，  抖动的时间间隔 
        // 返回 一个新函数，新函数里面 得调用 抖动结束要执行的函数 
        function debounce(callbackFn, interval) {
            let flag = null

            return function () {
                //被多次执行

                // 清除上一次
                clearTimeout(flag)
                // 开启的一个新的
                flag = setTimeout(() => {
                    callbackFn()
                }, interval);

            }
        }

        // 建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法

        function box() {
            console.log('检查用户的输入');
        }
        // 返回一个防抖函数，
        // 防抖函数 短时间内(1000毫秒) 被多次调用,会保证 box 在抖动结束会执行一次
        // let newFn = _.debounce(box, 1000)
        // ipt.oninput = function () {
        //     console.log('input');
        //     newFn()
        // }
        // let newFn = debounce(box, 1000)
        // ipt.oninput = newFn;
        // 把返回的防抖函数 直接作为事件处理函数
        ipt.oninput = debounce(box, 1000);

    </script>

节流

节流：控制一个函数 短时间的执行的次数 。节流就是 控制 函数多次触发 之间的事件间隔。 比如原来每个1ms执行一次，通过节流可以调整 为每个200ms执行一次。

 input 输入事件：如果用户输入很快，input事件短时间内多次触发。

html中写一个input输入框：

<input type="text" name="" id="">

 js代码：

        //节流  控制一个函数 短时间的执行的次数 
        // input 输入事件--如果用户输入很快--input事件短时间内多次触发
        // 节流就是 控制 函数多次触发 之间的事件间隔。 比如原来每个1ms执行一次，通过节流可以调整 为每个200ms执行一次

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



        function throttle(func, wait) {
            let flag = false;//记录 是否 有一个 延时器启动 得等待执行check函数

            return function (...args) {
                console.log(this);// 事件处理函数中的this
                if (flag == false) {
                    flag = true
                    timer = setTimeout(() => {
                        // func();--调用func  并且改它里面的this
                        func.call(this, ...args)
                        //一旦定时器 执行函数，flag 变为 false
                        flag = false;
                    }, wait);
                }
            }

        }
        // 调用节流函数，返回一个新函数，新函数连续多次被执行，会每个1000毫秒执行check一次
        // let newFn = throttle(check, 1000)
        // ipt.oninput = newFn;
        ipt.oninput = throttle(check, 1000);
        // let newFn = throttle(check, 1000)
        // ipt.oninput = function () {
        //     newFn()
        // };

        function check(evt) {
            console.log('检测用户的输入');
            console.log(this);//希望在这里能用到 事件函数中的this
            console.log(evt);
        }