防抖函数和节流函数

在我们日常项目开发中，防抖函数和节流函数是我们经常会用到的性能优化手段，下面就和我一起来详细的了解一下什么是防抖函数和节流函数，及它们的应用场景。

一、防抖函数

作用：防止函数在极短的时间内反复调用，造成资源的浪费，而防抖函数会把多次执行变成最后一次执行，节省了资源。

场景：

1.页面触发频率较高的：如：滚动条滚动，窗口尺寸变化，鼠标移动，当我们触发这一类事件是，不再频繁的立即执行函数，而是等一段时间，以最后一次为计时起点，一段时间后再执行；
2.搜索场景，当一个文本框输入文字时，需要将文字发送到服务器，并从服务器得到搜索的结果；
。。。。等

实现代码：

const debounce = (fn,delay)=>{
            let timer= null;
            return (...args)=>{ //返回闭包函数，保留执行上下文
               clearTimeout(timer);
               timer =  setTimeout(()=>{
                    fn.apply(this,args);
                   //this.fn(args);
                },delay)
            }
}

应用场景实例：

<input type="text" id="inp">
    <script>
        let inp = document.querySelector("#inp");
        function debounce(fn,delay){
            let timer= null;
            return (...args)=>{
                clearTimeout(timer);
               timer =  setTimeout(()=>{
                    fn.apply(this,args);
                },delay)
            }
        }
    
        function getZm(val){
        
            console.log("最终"+val)
        }
        var newDebounceFn = debounce(getZm, 1000);
        inp.onkeyup = function(e){
            newDebounceFn(this.value)
        }
    </script>

很简单，大家可以自己动手敲一下看看效果就知道是怎么回事咯~

二、节流函数

节流函数，其实和防抖函数类似，但是节流函数是保证一段时间内只执行一次核心的代码，和定会器很像，简单讲就是会规律性的执行多次。试想我们绑定了一个事件，如scroll事件，当我们绑定滚动事件去做某件事的时候，为了她绑定了一些DOM操作，而DOM操作是很耗性能的，这时频繁的执行函数会引发大量的计算，高频率很容易使用户的浏览器崩溃。这个时候就需要用到了节流函数。

定义：

触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

场景：

1.监听scroll事件，下拉滚动条到一定位置显示返回顶部按钮；
2.监听resize事件，自适应页面是时候调整DOM的渲染；
3.keyup事件，输入文字调用接口进行模糊匹配等

实现代码：

const  throttle = (fn,delay=500)=>{
            let flag = true;
            return (...args)=>{
                if(!flag) return;
                flag = false;
                setTimeout(()=>{
                    fn.apply(this,args);
                    flag = true;
                },delay)
            }
 }

应用场景实例：

 <div style="height:5000px"></div>
    <script>
        function throttle(fn,delay){
            let flag = true;
            return (...args)=>{
                if(!flag) return;
                flag = false;
                setTimeout(()=>{
                    fn.apply(this,args);
                    flag = true;
                },delay)
            }
        }
        function getScroll(v){
            
            console.log('scroll事件触发了' + Date.now( )+v)
        }
        var newThrottleFn = throttle(ggetScroll, 1000);
        document.onscroll = function(e){
            newDebounceFn(e,'throttle')
        }
    </script>

防抖函数和节流函数都是为了避免一段时间内某个方法被疯狂触发，从而消耗性能。上面我用了两个例子来简要说明它们在我们日常开发中的应用，希望能够帮助到大家。