JS中的的防抖和节流

最新推荐文章于 2024-06-27 13:36:25 发布

人称小沸羊羊

最新推荐文章于 2024-06-27 13:36:25 发布

阅读量160

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/zmy052071/article/details/131358028

版权

本文介绍了JavaScript中用于性能优化的两种技术——防抖(debounce)和节流(throttle)，并提供了具体的代码示例。防抖函数确保在一段时间内的连续触发后只执行一次，而节流函数则限制了函数执行的频率，确保在固定间隔内执行。文章通过input事件处理为例，展示了如何使用防抖和节流来优化频繁触发的事件处理，如用户输入检查。

摘要由CSDN通过智能技术生成

函数防抖

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

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

<body>
    <input type="text" name="" id="">
    <script>
        /*
            防抖--防止一个函数，短时间内多次被触发，希望抖动结束执行一次
               抖动 一个函数 短时间内被多次执行
        */
        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('检查用户的输入');
        }
    </script>

</body>

防抖封装

<body>
    <input type="text" name="" id="">
    <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 type="text" name="" id="">
<script>
        //节流  控制一个函数 短时间的执行的次数 
        // input 输入事件--如果用户输入很快--input事件短时间内多次触发
        // 节流就是 控制 函数多次触发 之间的事件间隔。 比如原来每个1ms执行一次，通过节流可以调整 为每个200ms执行一次

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

        let flag = false;//记录 是否 有一个 延时器启动 得等待执行check函数


        ipt.oninput = function () {
            // 如果没有延时器在等待执行check函数，  就去开启一个，并且 把flag 变为 true
            if (flag == false) {
                flag = true
                timer = setTimeout(() => {
                    check();
                    //一旦定时器 执行函数，flag 变为 false
                    flag = false;
                }, 1000);
            }


            // 第一次触发input事件  开启一个延时器 ，200毫秒以后执行
            // 第二次触发input事件   判断 是否已经有一个 延时器在等待执行 check函数




        }

        function check() {
            console.log('检测用户的输入');
        }

    </script>

节流封装

<body>
    <input type="text" name="" id="">
    <script>
        //节流  控制一个函数 短时间的执行的次数 
        // 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);
        }

    </script>

</body>