防抖和节流

 1、节流

       就是保证一段时间内，核心代码只执行一次。（控制流量）

 2、防抖

       就是一段时间结束后，才能出发一次事件，如果一段时间未结束再次触发事件，就会重新开始计算时间。

/****
 * 
 * 性能优化：
 * 
 * 优化高频率事件 onscroll oninput resize onkeydown  keydown
 * 
 * throttle  节流
 * 
 * 用户scroll 和resize  行为会导致页面 不断重新渲染，如果在绑定的回调函数中大量操作dom 也会出现卡顿
 * 
 * javascript 动画/往页面里添加一些DOMu元素
 * Style 确定每个DOM 应该用什么样式规则
 * Layout 布局，计算最终显示的位置和大小
 * Paint绘制dom，在不同的层上绘制
 * Composite 渲染层合并
 * 
 * 
 * debounce  防抖
 * 
 * 
 * 函数节流   控制流量
 * 节流就是保证一段时间内，核心代码只执行一次
 * 
 * 
 */

 function throttle(method,delay){
     let last=0;
     return function(){
         var now=+new Date();
         if(now-last>delay){
             method.apply(this,arguments);
             last=now;
         }
     }
 }

 let logger=function(){
     console.log('logger --- ---');
 }

 window.addEventListener("scroll",throttle(logger,500));

 /****
  * 
  * 防抖(Debounce)
  * 
  * 防抖就是一段时间结束后，才能出发一次事件，如果一段时间未结束再次触发事件，就会重新开始计算时间。
  */

  function debounce(func,wait){
    let timer=null;

    return function(){
        clearTimeout(timer);
        timer=setTimeout(()=>{
            func.call(this,...arguments);
        },wait);
    }
  }

  let logger=function(){
    console.log('logger --- ---');
 }

 window.addEventListener("scroll",throttle(logger,500));