防抖(debounce)和节流(throttle)

针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。防抖和节流就是针对响应跟不上触发频率这类问题的两种解决方案

因此针对这类事件要进行防抖动或者节流处理（通过防抖/节流控制触发频率，防止一个事件频繁触发回调函数）

防抖动（debounce ）

特点：当事件快速连续不断触发时，动作只会执行一次。

用法：限制下次函数调用之前必须等待的时间间隔

本质：将多次执行变为最后一次执行

//窗口大小调整完毕后，在执行resize事件中的代码,通过闭包
window.onresize=debouce();
function getClient(){
  var winH = document.documentElement.clienHeight;
  var winW = document.documentElement.clienwidth;
  console.log(winH,winW);
}

function debouce(){
  var timer;
  return function(){
    if (timer){	//如果有定时器，就清除
      clearTimeout(timer);
    }
    timer = setTimeout(getClient,2000); //再设置定时器 在resize事件结束的两秒后执行一次getCliten()
  }
}

节流阀（throttle ）

比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流阀技术来实现。

特点：在连续高频触发事件时，动作会被定期执行，响应平滑，使得一定时间内只触发一次函数

本质：将多次执行变为每隔一段时间执行

//拖动滚动条时，每隔几秒才执行一次事件内容，通过闭包
window.onscroll = throttle();
function getScroll(){
  var winT = document.documentElement.scrollTop;
  console.log(winT);
}

function throttle(){
  var timer;
  return function(){
    if(!timer){ //如果没有定时器，设置定时器
      setTimeout(function(){
        getSrollT();
        timer=null; //执行scroll事件后 执行一次getScroll() 再取消定时器
      },2000); //2s后再进入判断 设置定时器
    }
  }
}

共同点

都是用来做性能优化，都利用延迟定时器

区别

节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数， 而防抖动只是在最后一次事件后才触发一次函数。

总结

如果事件触发是高频但是有停顿时，可以选择debounce，动作只被执行一次
在事件连续不断高频触发时，选择throttling，动作每隔一段时间执行一次