防抖与节流

 防抖 - 在同一时间内 频繁触发事件,只处理最后一次

document.querySelector('input').addEventListener(
        'input',
        debounce(function () {
          console.log('输入')
        }, 200)
      )
 function debounce(fn, t) {
        let setId
        return function () {
          clearTimeout(setId)
          setId = setTimeout(function () {
            fn()
          }, t)
        }
      }

  节流 - 在同一时间内 频繁触发事件,只执行一次

document.querySelector('button').addEventListener(
        'click',
        throttle(function () {
          console.log('发请求')
        }, 200)
      )
       function throttle(fn, t) {
         let flag = false // 一开始 false表示没有任务执行
         return function () {
           if (flag) return
           flag = true
           setTimeout(function () {
             fn()
             flag = false 
           }, t)
         }
       }

都是性能优化的手段

区别：

防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。

节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。