函数节流（throttle）和函数防抖（debounce）

0.前言

JS中由于事件频繁触发，会频繁操作DOM或者加载资源等行为，有时会导致卡顿甚至崩溃

1. window对象的resize和scroll (用throttle)
2. 输入文字、自动完成时的keyup (用denounce)
3. 目标移动时的mouseup，mousedown，keyup，keydown (用throttle)
4. 拖拽时的mousemove (用throttle)

为了解决以上问题，有了两种方式函数去抖（debounce）和函数节流（throttle）

lodash和underscore都对这两个方法进行了封装，可以直接使用

1.debounce 函数防抖

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

• 思路：每次触发事件时都取消之前的延时调用方法
• 函数防抖：快速执行某些操作时，实际上只需要执行最后一次操作
• 防抖也是节流的一种方式

var debounce = function(delay, action) {
  var last
  return function() {
    var that = this
    var args = arguments
    
    // 在delay周期内每次触发，都会清除之前的定时器，执行最新一次操作，并重新计算时间
    clearTimeout(last)
 
    last = setTimeout(function() {
      action.apply(that, args)
    }, delay)
  }
}

2.throttle 函数节流

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

• 思路：每次触发事件时都判断当前是否有等待执行的延时函数
• 节流：控制函数执行的次数，适当舍弃一些操作
• 预先设定一个执行周期delay，当调用动作的时刻大于等于执行周期时才执行该动作
• 若在周期内重复调用，则丢弃掉，只执行第一次调用

var throttle = function(delay, action) {
  var last = new Date()
  return function() {
    var current = new Date()
    if (current - last > delay) {
      action.apply(this, arguments)
      last = current
    }
  }
}