前端框架中常见的公共方法汇总：防抖节流

Posted 2021-08-17 萌萌的DDD

 一、为什么要用防抖和节流

       在浏览器中，频繁的DOM操作或发送请求会非常占用内存资源，而实际开发场景中，、又不可避免的会遇到持续触发或重复触发的事件和方法。处理不当或者放任不管就容易引起浏览器卡死，如：input的change事件，滚动条scroll事件等等。因此需要降低事件被触发的频次，防止过多的回调函数占用浏览器内存。

二、Vue中公共封装的防抖

防抖：当不断触发高频事件后设置一个标识，通过标识来判断高频事件是否结束，如果未结束责支触发一次事件，并且在标识内高频事件再次被触发，则重新计算时间。

/**
 * 函数防抖
 * @param fn
 * @param delay
 * @returns {Function}
 * @constructor
 */
export const _debounce = (fn, t) => {
  const delay = t || 500
  let timer
  // console.log(fn)
  // console.log(typeof fn)
  return function() {
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fn.apply(this, args)
    }, delay)
  }
}

 二、Vue中公共封装的节流

节流：节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。就是在一段时间内，只执行一次。

/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const _throttle = (fn, t) => {
  let last
  let timer
  const interval = t || 500
  return function() {
    const args = arguments
    const now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        fn.apply(this, args)
      }, interval)
    } else {
      last = now
      fn.apply(this, args)
    }
  }
}

总结：

节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数

防抖只是在最后一次事件后才触发一次函数。