节流和防抖

这两个东西，你肯定听过，就是两种优化浏览器性能的手段。相关文章你肯定也看过，如果还是不太清楚，没关系，看完这篇短文，相信你能轻松理解其中差别。

1:防抖与节流给概念

防抖:给一个固定时间，如果你开始触发动作，并且在这个固定时间内不再有任何动作，我就执行一次， 否则我每次都会重新开始计。 节流:比如鼠标移动事件，此时只需要指定一个“巡视”的间隔时间，不管用户期间触发多少次，只会在间隔点上执行给定的回调函数。

2:这俩有啥用？

防抖（deounce）:可用于input.change实时输入校验，比如输入实时查询，你不可能摁一个字就去后 端查一次，肯定是输一串，统一去查询一次数据。可用于 window.resize 事件，比如窗口缩放完 成后才会重新计算部分 DOM 尺寸
节流（throttle）:用于监听 mousemove、 鼠标滚动等事件，通常可用于：拖拽动画、下拉加载。

3:手写防抖, 节流

防抖 \

    function handlerChange(fn,delay=200){
        let timeout
        return function(){
        // 重新计时
        timeout && clearTimeout(timeout);
        timeout = setTimeout(fn.bind(this), delay, ...arguments); 
       }
      }
    const handlerChange = debounce(function () {alert('更新触发了')}
    // 绑定监听
    document.querySelector("input").addEventListener('input', handlerChange);

节流 \

function throttle(fn, threshhold = 200){
let timeout
let start=new Data();
return function(){
 // 触发时间
 const current = new Date() - 0;
 timeout && clearTimeout(timeout);
// 如果到了时间间隔点，就执行一次回调
    if (current - start >= threshhold) {
      fn.call(this, ...arguments);
      // 更新开始时间
      start = current;
    } else {
      // 保证方法在脱离事件以后还会执行一次
      timeout = setTimeout(fn.bind(this), threshhold, ...arguments);
    }
}

}
let handleMouseMove = throttle(function(e) {
  console.log(e.pageX, e.pageY);
})

// 绑定监听
document.querySelector("#panel").addEventListener('mousemove', handleMouseMove);