防抖 节流

防抖

• 前面所有的触发都被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续快速的触发，只会执行一次

• 用户操作频繁，但只执行一次

  function debounce(fn,delay){
      let timer = null 
      return function() {
          if(timer){
            // 当前已经开启了一个定时器，关闭它，重新开启一个新的定时器  
              clearTimeout(timer) 
              timer = setTimeout(fn,delay) 
          }else{
              timer = setTimeout(fn,delay)
          }
      }
  }
  

节流

• 在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

• 用户操作频繁，将频繁的操作变为少量的操作

  function throttle(fn,delay){
      let valid = true
      return function() {
         if(!valid){
             // 当前已经执行的函数还没执行完成，禁止再次执行
             return false 
         }
         // 在指定时间内执行函数一次
          valid = false
          setTimeout(() => {
              fn()
              // 函数执行完成，放行，可以执行下一次操作了
              valid = true;
          }, delay)
      }
  }