防抖和节流

什么的防抖和节流？

防抖和节流是两种应对web页面中频繁触发事件的优化方案，可以在JavaScript库Lodash中的_.debounce()以及_.throttle方法实现

背景：当事件触发非常频繁时，每一次的触发，回调函数都要去执行（如果时间很短，且回调函数内部有计算，那么很可能出现浏览器卡顿），从而浪费性能。

防抖 debounce

防抖就是防止抖动，避免事件的重复触发。可以概括为触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 

应用场景：

• 点击按钮事件，用户在一定时间段内的点击事件，为了防止和服务端的多次交互，我们可以采用防抖。
• 富⽂本编辑器邮件等编辑内容实时保存
• 浏览器的窗口大小resize事件

代码实现：

//创建一个防抖函数debounce
function debounce(fn, delay) {
  // 定义一个定时器, 保存上一次的定时器
  let timer = null

  // 真正执行的函数
  const _debounce = function () {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn()
    }, delay)
  }

  return _debounce
}

节流 throttle

节流就是在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调。即控制事件触发的频率。

应用场景：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能

代码实现：

function throttle(fn, interval) {
  // 记录上一次的开始时间
  let lastTime = 0

  // 事件触发时, 真正执行的函数
  const _throttle = function () {
    // 获取当前事件触发时的时间
    const nowTime = new Date().getTime()

    // 计算出还剩余多长时间需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 真正触发函数
      fn()
      // 保留上次触发的时间
      lastTime = nowTime
    }
  }

  return _throttle
}