什么是防抖和节流

防抖

触发高频事件后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 throttle(fn){
    let isRun = true; // 通过闭包保存一个标记
    return function(){
      if(!isRun){ // 在函数的开头判断标记是否为true, 不为true则什么都不做 直接return
        return;
      }
      isRun = false; 
      window.setTimeout(() => {
        fn.apply(this, arguments);
        isRun = true;
      }, 500);
    }
  }
 // 使用
  function say(e) { 
    console.log(e.target.innerWidth, e.target.innerHeight); 
  } 
  window.addEventListener('resize', throttle(say));