防抖、节流

防抖

原理：事件触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

简易版

  var timer = null
  const debounce = function (fn, ms) {
    return (...args) => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, ms);
      
    }        
  }

应用场景：防止多次提交按钮，只执行最后提交的一次。类似于模糊搜索

节流

原理：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

 var flag = true
  const throttle = function (fn, ms) {
    return (...args) => {
      if (!flag) return
      flag = false
      setTimeout(() => {
        fn.apply(this, args)
        flag = true
      }, ms);
    }        
  }
  

应用场景：拖拽、缩放、动画