防抖与节流

前言

防抖与节流的概念通常被用于前端性能优化中

了解其概念后，实现他们是很简单的

防抖

防抖可以举个栗子，比如电梯，在电梯载人的过程中，电梯门自动关闭前，有人要进电梯，这时电梯门会回到原始位置，等这个人进来后，电梯门继续开始自动关闭。一直到电梯门关闭时，都没有人要进电梯，这时电梯门的关闭过程执行完毕。

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce (fn, delay) {
  // 定时器
  let timeout = null
  return function () {
    // 清空上一个定时器
    clearTimeout(timeout)
    // 重新开启定时器
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

防抖的应用场景

比如输入框，输入一次就会发送一次ajax请求给服务器，这样会造成严重的服务器压力，这时候可以使用防抖对其进行优化，如果1s内一直输入，都会重置定时器，直到1s内没有再次输入，才会发送这个ajax请求

节流

节流也可以举个栗子：也是电梯，无论你按多少次电梯关闭按钮，它都是只会在那段时间内只关闭一次

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

function throttle (fn, delay) {
  let canRun = true // 是否可以运行的标识符
  return function () {
    if (!canRun) return // 如果不能运行，直接返回
    canRun = false // true进来后，将标识符变为false，在定时器执行完后才会变为true，所以定时器执行前都会是false，都会直接返回
    setTimeout(() => {
      fn.apply(this, arguments)
      canRun = true //在执行完setTimeout后，又置为true，否则其他的进来都是false，被return
    }, delay)
  }
}

节流的应用场景

比如滚动到底部自动加载，滚动到底部，肯定要在滚动条滚动时进行是否到达底部的判断，这样的滚动会执行太多次的判断了，因此引入节流的概念，在一定时间内只执行一次判断是否到达底部，也完成了性能的优化

总结

防抖与节流都对前端性能优化有很大的贡献，但是其使用就得根据场景来决定了，相信在了解了概念后，大家都能正确的根据场景使用正确的优化方式！