heihei12305

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

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

<button >
    防抖
  </button>
  <button >
      节流
    </button>
  <script>
    let btn = document.querySelectorAll('button');//获取到button
    if(btn[0]){
      let timeout = null;
      btn[0].onclick = function(){
        clearTimeout(timeout);//1000毫秒内再次触发，会清除上次，重新开始计数
        timeout = setTimeout(()=>{
          console.log(1);
        },1000);
        
      }
    }

    if(btn[1]){
      let canRun = true;
      btn[1].onclick = function(){//设置canRun 标志位，每次执行完成后方可继续执行
        if(!canRun) return;
        canRun = false;
        name = setTimeout(()=>{
          console.log(2);
          canRun = true;
        },1000)；
      }
    }
  </script>