0.前言
JS中由于事件频繁触发，会频繁操作DOM或者加载资源等行为，有时会导致卡顿甚至崩溃
- window对象的resize和scroll (用throttle)
- 输入文字、自动完成时的keyup (用denounce)
- 目标移动时的mouseup，mousedown，keyup，keydown (用throttle)
- 拖拽时的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
}
}
}
