前端防抖和节流

国外大佬关于防抖和节流的详细介绍David Corbacho's article

防抖和节流的作用是对前端的性能优化

防抖debounce

说明：单位时间内，频繁触发事件，只执行最后一次

使用场景：搜索框搜索输入，手机号、邮箱验证输入检测

类似王者中的回城

案例：resize事件监听窗口变化

<script>
        const getWindowInfo = function(){
            const windowInfo = {
                width:window.innerWidth,
                height:window.innerHeight
            }
            console.log(windowInfo)
        }

        
        window.addEventListener('resize',getWindowInfo)
</script>

未添加防抖前，每次变化都会打印，浪费浏览器性能

添加防抖效果，自定义防抖函数

 <script>
        const getWindowInfo = function(){
            const windowInfo = {
                width:window.innerWidth,
                height:window.innerHeight
            }
            console.log(windowInfo)
        }


        function my_debounce(fun,time){
            // 声明定时器变量
            let timer = null

            return function(){
                // 事件触发的时候先判断是否有定时器，如果有，取消定时器
                if(timer) clearTimeout(timer)
                // 如果没有，开启定时器，存入定时器变量中
                // 定时器里写函数调用
                timer = setTimeout(function(){
                    fun()
                },time)
                
            }

        }

        
        window.addEventListener('resize',my_debounce(getWindowInfo,500))
 </script>

添加防抖后，窗口变化完成结束后500ms才会执行打印

节流throttle

说明：单位时间内，频繁触发事件，只执行一次 

使用场景：高频事件，如鼠标移动mousemove，页面尺寸缩放resize，滚动条滚动scroll

类似王者中的技能CD

案例：resize事件监听窗口变化

效果：未节流前每次改变都会打印，防抖后只会打印改变结束后的值，节流后可以设置每隔一定时间打印一次，如1s，在这1s内，不论改变窗口多少次，只打印一次

自定义节流函数

<script>
        // 声明定时器变量
        // 事件触发时判断是否有定时器，如果有不开启新定时器
        // 如果没有，开启新定时器
        // 定时器里调用执行的函数 将定时器清空
        function my_throttle(fun, time) {
                let timer = null
                return function () {
                    if (!timer) {
                        timer = setTimeout(function () {
                            fun()
                            timer = null
                        }, time)
                    }
                }
            }
        
        window.addEventListener('resize',my_throttle(getWindowInfo,500))
</script>

简单做法

使用Lodash库中的节流和防抖函数

lodash.throttle | Lodash中文文档 | Lodash中文网

lodash.debounce | Lodash中文文档 | Lodash中文网