防抖/节流函数封装

防抖函数

例子：等电梯–电梯从最后一个人进来开始计算，10秒之后执行关门；如果一直有人往电梯里面走的话，电梯可能永远关不上
理解：忽略前面所有高频操作，从最后一次调用开始，之后延时x毫秒执行
防抖函数思路：定时n秒, 到了才执行逻辑代码, 如果事件又触发了, 清除上一个定时器, 重新创建定时器 最后执行一次

防抖函数封装—debounce

function debounceBuilder (f, t = 1000) {
  console.log('防抖' + t + '毫秒')
  let timerId = null
  return function () {
    clearTimeout(timerId)
    timerId = setTimeout(() => {
      f.apply(this)
    }, t)
  }
}

节流函数

例子：水龙头，一滴一滴的，降低水流频率
理解： 一件事如果执行的频率非常快，节流就是把频率降至指定的值，也可称为降频函数
节流函数思路：当降频函数被执行时，检查当前是否可以执行，如果可以，则开启10秒定时器，到了10秒后，执行doSomething，并把标识设为假。

节流函数封装- throttle

function throttleBuilder (fn, t = 50) {
  console.log('节流' + t + '毫秒')
  let timerId = null
  return function () {
    if (timerId) {
      return
    }
    timerId = setTimeout(() => {
      fn().apply(this)
      timerId = null
    }, t)
  }
}