30秒理解防抖和节流

原理

防抖：当短期内有大量的事件触发时，只会执行最后一次触发的事件。

节流：当短期内有大量的事件触发时，只会执行第一次触发的事件。

实现

防抖

const debounce = (fn, ...args) => {
  let timeout = null
  return () => {
    clearTimeout(timeout)
    timeout = setTimeout(() => fn.apply(this, args), 300)
  }    
}

案例

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求
• 调整浏览器窗口大小时，resize 次数过于频繁
• 文本编辑器实时保存，scroll、mousemove等
• 搜索框input事件
• 对于键盘事件，当用户输入比较频繁的时候，可以通过防抖合并键盘事件处理
• 对于ajax请求的情况。例如：当页面下拉超过一定范围就通过ajax请求新的页面内容

节流

const throttle = (fn, ...args) => {
  let timeout = null
  return () => {
    if (timeout) return
    timeout = setTimeout(() => {
      fn.apply(this, args)
      timeout = null
    }, 300)
  }
}

案例

• scroll 事件，每隔一秒计算一次位置信息
• 浏览器播放事件，每个一秒计算一次进度信息
• 对于鼠标移动和窗口滚动，鼠标的移动和窗口的滚动会带来大量的事件，但是在一段时间内又必须看到页面的效果