防抖、节流函数的实现

---

防抖函数的核心思想

• 当触发一个函数时，并不会立即执行这个函数，而是会延迟（通过定时器来延迟函数的执行）
  • 如果在延迟时间内，有重新触发函数，那么取消上一次的函数执行（取消定时器）
  • 如果在延迟时间内，没有重新触发函数，那么这个函数就正常执行（执行传入的函数）

• 接下来，就是将思路转成代码即可
  • 定义 debounce 函数要求传入两个参数
    • 需要处理的函数 fn
    • 延迟时间
  • 通过定时器来延迟传入函数 fn 的执行
    • 如果在此期间有再次触发这个函数，那么 clearTimeout 取消这个定时器
    • 如果没有触发，那么在定时器的回调函数中执行即可

function debounce(fn, delay) {
  var timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(function () {
      fn()
    }, delay)
  }
}

节流函数的默认实现思路采用时间戳的方式来完成

• 我们使用一个 last 来记录上一次执行的时间
  • 每次准备执行前，获取一下当前的时间 now：now - last > interval
  • 那么函数执行，并且将 now 赋值给 last 即可

function throttle(fn, interval) {
  var last = 0

  return function () {
    // this和argument
    var _this = this
    var _arguments = arguments

    var now = new Date().getTime()
    if (now - last > interval) {
      fn.apply(_this, _arguments)
      last = now
    }
  }
}