性能优化-防抖节流

前端的性能优化一直是前端学习的重点，而优化的方案有：回流重绘、懒加载、防抖节流等，本篇文章主要介绍防抖和节流。

理解：

防抖就是在事件被触发n秒后再执行回调，如果在这n秒内事件又被出发，则重新计时。
节流是指规定规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一单位时间内某事件被触发多次，只有一次能生效。

应用场景

防抖：

• 按钮提交：防止多次提交按钮，只执行最后一次
• 服务端验证：表单验证需要服务端配合，只执行一端连续输入事件的最后一次，如：搜索框搜索

节流：

• 拖拽：鼠标连续点击某事件，仅在单位时间内触发一次
• 缩放：调节浏览器窗口大小resize事件
• 动画：避免短时间内多次触发动画引起性能问题

实现

防抖：

function debounce(fn, wait) {
  var timer = null
  return function () {
    var context = this,
      args = [...arguments]
    // 如果此时存在定时器的话，则取消之前的定时器重新记时
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, wait)
  }
}

节流：

function throttle(fun, wait) {
  let timeout = null
  return function () {
    let context = this
    let args = [...arguments]
    if (!timeout) {
      timeout = setTimeout(() => {
        fun.apply(context, args)
        timeout = null
      }, wait)
    }
  }
}