Js函数节流与防抖

节流函数

在js开发中经常遇到事件频发触发的问题，例如监听屏幕上下滑动，频繁触发，这样会导致性能损耗，节流函数则可以缓解这个问题，通过节流函数，可以让时间在一定时间内，只响应一次，避免频繁触发。

原理如上图，原本我们在每个时间段都会触发一次方法，通过节流函数，在60ms内仅对第一次触发响应。

方法一 利用timeout延时器

    const throttle = (func,delay = 50) => {
        let timer = null;//保持timer
        return function() {
            if(!timer){//若timer = null 才触发
                func.call(this);//调用方法，并将指向纠正
                timer = setTimeout(()=>{
                   timer = null;//设置定时器 在delay时间内仅第一次调用生效
                },delay)
            }
        }
    };

通过闭包函数，保存timer状态，重复调用，通过timer状态判断是否应该执行方法

方法二 利用时间戳

    let throttle = (func,delay = 50) => {
        let timer = 0;//初始化timer
        return function() {
            if( new Date() - timer >= delay){//判断当前时间距离上次执行是否小于规定
                func.call(this);//调用方法，并将指向纠正
                timer = new Date();//为timer重新赋值 记录最新执行时间
            }
        }
    };

原理一致，延时时间改为时间戳判断

防抖函数

在开发中还会遇到一种情况，某一事件触发，一段时间内 只需要最后一次触发响应，例如表单验证，搜索功能，监听表单的改变，一定时间间隔内只监听最后一次表单改变，显示相关推荐信息，节省性能消耗。

如上图，一事件在1 2 步是分别触发事件但响应间隔小于要求，不响应，在第三步触发后，在规定事件内未再次触发，则响应事件。

const deBounce = (func, delay = 1000) => {
 let timer = null;
 return function (...args) {
   clearTimeout(timer); //清除定时器 重新记时
   timer = setTimeout(() => {
     func.apply(this, args);
   }, delay); //达到规定休眠时间，响事件
 };
};

只有大于100ms时间间隔的时间会响应