throttle 函数与 debounce 函数

某些操作会导致 DOM 事件频繁被触发，从而频繁调用事件监听函数，如果事件监听函数中执行的是 DOM 操作或加载资源等比较耗费计算机资源的任务时，会导致浏览器反应迟钝甚至崩溃。throttle 函数与 debounce 函数通过使用一些技巧，减少监听函数的执行频率，适用于浏览器的 resize、scroll 事件以及通过文本框 keyup 事件进行 Ajax 请求等操作。

throttle 函数

throttle 函数又称为节流函数。我们可以把水滴理解成事件监听函数，如果我们打开水龙头，水滴会连续不断地涌出，就相当于事件监听函数会连续不断地执行。如果我们将水龙头拧到最小，让水滴一滴一滴地流出，就相当于我们让事件监听函数按照一定的时间间隔来执行。

function throttle (func, wait) {
  var lastInvokeTime = 0
  return function () {
    var time = Date.now()
    if (time - lastInvokeTime >= wait) {
      func()
      lastInvokeTime = time
    }
  }
}

// handler 是事件监听函数
var handler = function () {
  console.log('throttle')
}

window.onscroll = throttle(handler, 300)

以上代码中，当连续触发 window 的 scroll 事件的时候，不会连续调用 handler 函数，会保证 handler 函数连续调用的最小时间间隔为 300 毫秒。

debounce 函数

debounce 函数又称为防抖动函数。我们可以把拍照理解成事件监听函数，当我们按下快门的时候，手可能在抖动，这时候照相机不会立即拍照，它会等待我们的手停止抖动之后再拍照，就相当于当我们连续触发事件的时候，事件监听函数不会立即执行，而是等我们一段时间内不再触发事件的时候，再执行事件监听函数。

function debounce (func, wait) {
  var timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(func, wait)
  }
}

// handler 是事件监听函数
var handler = function () {
  console.log('debounce')
}

window.onscroll = debounce(handler, 300)

以上代码中，当连续触发 window 的 scroll 事件的时候，不会连续调用 handler 函数，会等到持续 300 毫秒都没有 scroll 事件触发的时候，才调用 handler 函数。