es6防抖与节流

es6-防抖和节流

防抖和节流函数都是为了限制函数的执行频次，优化函数触发频率过高造成的响应速度跟不上触发频率，出现延迟、假死或者卡顿的现象（例如input,scroll,keyup,keydown,resize等）

防抖

触发完事件n秒内不再触发，才执行；如果n秒内再次触发则再次重新计时
应用场景：

• 用户在输入框中连续输入一串字符后，只会在输入完最后一个字符后进行ajax请求，这样可以有效减少请求次数，节约请求资源；
• window的scroll、resize事件，不断的调整浏览器的窗口大小、或者滚动时会触发事件，防抖只让其触发一次；

//函数防抖的实现
doucument.querySelector('input').oninput = debounce()
function debounce(fn, wait){
    var timer = null;
    return function(){
        var content = this,args = arguments;
        //如果此时存在定时器，取消掉之前的定时器重新计时
        if(timer){
           clearTimeout(timer);
           timer = null;
          }
        //设置定时器，使事件间隔指定事件后执行
        timer = setTimeout(() => {
             fn.apply(context,args);
              },wait);
    };
}

节流

持续触发事件，每隔一段时间，只执行一次事件（比较像技能冷却）
应用场景：

• 连续不断的处罚某事件（如点击），只在规定时间内触发一次

//函数节流的实现
function throttle(fn,delay) {
         var pertime = Date.now();
         return function() {
             var context = this,
             args = arguments;
             nowtime = Date.now();
//如果两次时间间隔超过了指定时间，则执行函数；
             if(nowtime - pertime >= delay) {
                  pretime = Date.now()
                  return fn.apply(context,args);
               }
         };
}