js性能提升之函数的防抖和节流

之前看到小伙伴的总结上提到了这个，当时没放在心上后来总觉得应该看一看，不看不知道一看吓一跳，原来这个东西这么有用

 

函数的防抖和节流，都是优化高频率执行js代码的方法，具体来说：
函数防抖：是在频繁触发的情况下，只有满足一定的时间，才会执行一次代码。
函数节流：是指一定时间内js方法只跑一次，例如人眨眼睛，一定时间内只眨一次。

使用场景：

函数防抖：多数用在用户注册时手机号和邮箱验证，只有用户输入完成后，前端才需要检测格式是否正确，如果不正确，再弹出提示语。包括发送验证码，同样是要求一定时间后才能再次操作。
函数节流：多数在监听页面元素滚动事件的时候会用到，因为滚动事件是一个高频触发的事件。

 

简单实现：

　　

函数防抖：

重点是需要一个setTimeout来辅助实现，延迟执行需要跑的代码，如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清除掉，重新开始，如果计时完毕，没有方法来访问触发，就执行代码。

// 定义一个常量，接收一个函数和延迟时间作为参数
        const debounce = (fn,delay) => {
            // 定义一个空变量
            let timer = null;
            // 为了保证this指向，返回一个箭头函数
            return (...args) => {
                // 每次走进来清理定时器
                clearTimeout(timer);
                // 设置定时器
                timer = setTimeout(() => {
                    // 调用apply方法绑定this指向
                    fn.apply(this,args);
                    // 设置延迟时间
                },delay)
            }
        }

函数节流：

重点是，声明一个变量当标志位，记录当前代码是否在执行，如果空闲，就正常触发方法执行，如果代码正在执行，就取消这次执行，直接return。

 // 定义一个函数，接收函数作为参数，同时设定要求时间
        const throttle = (fn, delay = 500) => {
            // 设置变量默认为true
            let flag = true;
            // 为了保证this指向，返回一个箭头函数
            return (...args) => {
                // 判断如果已经在执行就直接return
                if (!flag) return;
                // 否则就是没有执行，将状态赋值为false
                flag = false;
                // 设置定时器，设置时间
                setTimeout(() => {
                    // 调用apply方法确保this指向问题
                    fn.apply(this,args);
                    // 最后将状态重新更改为true，以便程序下次执行
                    flag = true;
                },delay)
            };
        };

转自他人链接：https://www.jianshu.com/p/c00d89c15554