防抖与截流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove，keyup 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。

防抖 （debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

其主要应用场景有： 实时搜索（即input输入），拖拽
其实现方式如下：

var debounce = function (fn, delay) {
  var timer = null
  return function() {
  var self = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = fn.apply(self, arguments)
    }, delay)
  }
}

截流 （throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

其主要场景有： 窗口缩放， 滚动， 连续点击
其实现方式有： 时间戳， 定时器， 时间戳+定时器

1）时间戳版：

var throttle = function(fn, delay) {
  var startTime = 0
  return function() {
    var self = this
    var curTime = Date.now()
    if (curTime - startTime >= delay) {
      fn.apply(self, arguments)
      startTime = Date.now()
    }
  }
}

2）定时器版

var throttle = function(fn, delay) {
  var timer = null
  return function() {
    var self = this
    var args = arguments
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(self, args)
        timer = null
      }, delay)
    }
  }
}

3）时间戳 + 定时器

var throttle = function (fn, delay) {
  var timer = null
  var startTime = Date.now()
  return function () {
    var self = this
    var curTime = Date.now()
    var remaining = delay - (curTime - startTime)
    clearTimeout(timer)
    if (remaining <= 0) {
      fn.apply(self, argument)
    } else {
      timer = setTimeout(fn, remaining)
    }

  }
}