前端性能优化之函数防抖和函数节流

函数防抖：函数防抖就是在函数需要频繁触发情况时，有足够空闲时间，才执行一次（延迟一段时间执行）。

应用：实时搜索、拖拽

// 封装函数防抖
function debounce(hanlde,delay){//参数为事件处理函数、延迟时间
    var timer = null;
    return function (){
        var _self = this;
        var _arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function (){
            hanlde.apply(_self,_arg);
        },delay);
    }
}

//应用函数节流
//<input type="text" id="inp">

var oInp = document.getElementById('inp');
function ajax(e) {//发送网络请求
  console.log(e,this.value)
}
oInp.oninput = debounce(ajax,1000)

函数节流：函数节流就是预定一个函数只有在大于等于执行周期时才会回执行，周期内调用不执行（控制函数在一个周期内只触发一次）。

应用：窗口调整、页面滚动、抢购疯狂点击

//封装函数节流
function throttle(handle,period){//参数为事件处理函数、周期
  var lastTime = 0;
     return function (e){
       var nowTime = new Date().getTime();
        if(nowTime - lastTime > preiod ){
           andle.apply(this,arguments);
           lastTime = nowTime;
        }
     }
}

//应用函数节流
//<button class="btn">click</button>
//<div class="box">0</div>

var oBtn = document.getElementsByClassName('btn')[0];
var box = document.getElementsByClassName('box')[0];
oBtn.addEventListener('click',throttle(numUp,1000))
function numUp(e){
  box.innerText = parseInt(box.innerText) + 1;
  console.log(this,e)
}

函数节流和函数防抖区别：防抖是针对某一事件我们不需要他频繁触发，只需要最后一次触发即可；而节流则是我们需要它频繁触发，但不希望它在一定周期内触发多次，不想让它触发那么快（避免被恶意攻击，造成服务器负载）

函数节流和函数防抖优点：节流和防抖解决了在某一功能被用户频繁触发，对于DOM操作、资源加载等耗费性能的处理，导致界面卡顿，甚至浏览器的崩溃的现象。