防抖和节流

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
实现思路：每次触发事件时都取消之前的延时调用方法

  function debounce(fn){
      let timer = null; // 创建一个标记来存放定时器的返回值
      return function(){
         window.clearTimeout(timer); // 每当用户触发事件时把之前的setTimeout清除掉
         timer =  window.setTimeout(() => {
            fn.apply(this,arguments); // 箭头函数中的this总是指向外层调用者
        }, 500);
      }
  }
  function say(){
     console.log("防抖成功");
  }
 // 使用
  let inp = document.getElementById('inp');
  inp.addEventListener('input', debounce(say));

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
实现思路：每次触发事件都判断当前是否有等待执行的延时函数

function chufa(fn) {  
    var flag = true  
    return function(){      
        if(!flag) return;      
        flag = false      
        setTimeout(()=>{          
            fn.apply(this,arguments)          
            flag = true      
        },1000)  
    }
}

function hansh(e){    
    console.log(e.target.innerWidth, e.target.innerHeight);
}

window.addEventListener('resize',chufa(hansh))