js实现防抖和节流

防抖

防抖——触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再 次被触发，则重新计算时间;

function debounce(fn){
    //创建一个标记来存放定时器的返回值
    let timeout = null;
    return function(){
    //每次用户输入时，把前一个timeout清除掉
      clearTimeout(timeout);
      timeout = setTimeout(()=>{
        fn.apply(this,arguments);
      },1000);
    }
  }
  function sayHi(){
    console.log('防抖成功');
  }
  var inp = document.getElementById("input").addEventListener('input',debounce(sayHi));

节流

节流——高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执 行频率。

function throttle(fn){
    let canRun = true; //通过闭包保存一个标记
    return function(){
      if(!canRun)return
      canRun = false;
      setTimeout(()=>{
        fn.apply(this,...arguments);
        canRun = true;
      },500);
    }
  }

  function sayHi(){
    console.log('窗口变化');
  }
  window.addEventListener('resize',throttle(sayHi));