防抖函数和节流函数

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

一、防抖函数

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

场景：

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

实现代码：

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

应用场景实例：

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

二、节流函数

节流函数，其实和防抖函数类似，但是节流函数是保证一段时间内只执行一次核心的代码，和定会器很像，简单讲就是会规律性的执行多次。试想我们绑定了一个事件，如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)
            }
 }

应用场景实例：

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