防抖 节流

防抖

• 定义：触发高频事件后n秒内函数只执行一次，如果n秒内高频事件再次触发，则重新计算时间

• 实现方式：每次触发时间时设置一个延时调用的方法，并且取消之前的延时调用方法

• 缺点：如果事件在规定时间间隔内不断被触发，则调用方法会被不断延迟

    // 防抖
      function debounce(fn, wait) {
          var timeout = null;
          return function () {
              if (timeout !== null) clearTimeout(timeout);
              timeout = setTimeout(fn, wait);
          }
      }
  
      // 处理函数
      function handle() {
          console.log(Math.random());
      }
      // 滚动事件
      window.addEventListener('resize', debounce(handle, 100));
  

节流

• 定义：高频事件触发，但是n秒内只会执行一次，会稀释函数的执行频率
• 实现方式：每次触发事件时，如果当前有等待执行的延迟函数，直接return

```

    //节流
    function throttle(fn,wait) {  
        let flag = true;
        return function () { 
            if(!flag) return ;
            flag = false;
            setTimeout(()=>{
             fn.apply(this,arguments);
             flag = true
            },wait)
         }
    }

    //处理函数
    function handle(){
        console.log(Math.random());
    }
    
    //触发事件
    window.addEventListener("resize",throttle(handle,500))
```