防抖节流函数封装

Vic--

已于 2023-09-21 11:21:44 修改

阅读量152

点赞数

文章标签：前端 javascript 开发语言

于 2023-08-16 10:53:35 首次发布

本文链接：https://blog.csdn.net/behance/article/details/132313858

版权

防抖

<body>
    <input type="text" id="inp">
    <script>
    
        // 1.封装防抖函数
        function debounce(fn, time) {
            // 创建一个标记用来存放定时器的返回值
            let timeout = null;
            return function () {
                // 每当用户触发input事件  把前一个 setTimeout 清除掉
                clearTimeout(timeout);
                // 然后又创建一个新的 setTimeout, 这样就能保证输入后等待的间隔内 还有字符输入的话，就不会执行上一个setTimeout
                timeout = setTimeout(() => {
                    // 这里进行防抖的内容
                    fn();
                }, time);
            };
        }

        // 2.获取inpt元素
        var inp = document.getElementById('inp');
		// 3. 测试防抖临时使用的函数
        function sayHi() {
            console.log('防抖成功');
        }
        // 4.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件 
        inp.addEventListener('input', debounce(sayHi, 5000)); 

    </script>
</body>

节流

    <script>
        // 1.封装节流函数
        function throttle(fn, time) {
            //通过闭包保存一个 "节流阀" 默认为false
            let temp = false;
            return function (...args) {
                //触发事件被调用 判断"节流阀" 是否为true  如果为true就直接return出去不做任何操作
                if (temp) {
                    return;
                } else {
                    //如果节流阀为false  立即将节流阀设置为true
                    temp = true; //节流阀设置为true
                    // 开启定时器
                    setTimeout(() => {
                        // 将外部传入的函数的执行放在setTimeout中
                        fn.apply(this, args);
                        // setTimeout执行完毕后再把标记'节流阀'为false，表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
                        temp = false;
                    }, time);
                }
            };
        }
        function sayHi(e) {
            // 打印当前 document 的宽高
            console.log(e.target.innerWidth, e.target.innerHeight);
        }
        // 2.绑定事件，绑定时就调用节流函数  
        // 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
        window.addEventListener('resize', throttle(sayHi, 2000));
    </script>