防抖和节流

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。

防抖 多次执行只执行一次

function debounce(fn,delay){
  let timer=null;
  return function(){
    if(timer){clearTimeout(timer)}
    timer=setTimeout(function(){
      fn()
    },delay)
  }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', debounce(handle, 2000));

节流 多次执行每隔delay秒才会触发

function throttle(fn,delay){
  let startTime=Date.now();
  return function(){
    let curTime=Date.now();
    let context=this;
    let args=arguments;
    if(delay<curTime-startTime){
      fn.apply(context,args);
      startTime=Date.now();
    }
  }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));