什么是函数函数防抖
函数防抖： 其实概念很简单，就两句话。
第一句：函数执行过一次后，在等待某时间段内不能再次执行。
第二句: 在等待时间内触发此函数，则重新计算等待时间。
这两句话既是函数防抖的定义，也是函数防抖的原理。lodash中的_.bounce就是围绕这两句话写的, 后面会给大家讲解。
换句通俗的话说，就是：你尽管触发事件，但是我一定在事件触发n秒后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后才执行，总之，就是要等你触发完事件n秒内不再触发事件，我才执行，真是任性呐。
如果不理解上面定义，我可以再给大家举个生活例子：
如果有人进电梯(触发事件)，那电梯将在10s出发(执行事件句柄)，这时如果又有人进电梯了(在10s内再次触发该事件)，我们又得等10s再出发(重新计时)。这个例子很完美的展示了函数防抖的精髓。
函数防抖使用场景
现在，大家可以很容易理解什么是函数防抖了吧。结合刚才的生活例子，可以想象下，在我们前端界有哪些是函数防抖的使用场景:
- 每次 resize/scroll 触发统计事件
- 文本输入验证（连续输入文字后发生AJAX请求进行验证，验证一次就好）
- mousemove，mousedown
- 加载更多(这个与前2个还是有点区别)
函数防抖的封装：
第一版：
我们先以函数被执行过一次后，在等待某时间段内不能再次执行原理，封装一个简单的函数防抖：
先假设函数的定义形式为：
window.onscroll = _debounce(function(){
console.log(1);
}, 500);
function _debounce(func, wait) {
var timer = null;
var context, args;
return function () {
context = this;
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, wait);
}
}
通过调用_debounce, 返回一个闭包函数。在连续调用_debounce时，只会在最后一次触发的时候执行回调，这是因为每次调用, 都会通过clearTimeout会清掉上一个timer。
现在仔细想想，这个封装貌似有个问题：如果我想在第一次触发的时候执行回调呢？这种场景是不是很适合加载更多场景？因为从体验方面看，我们希望第一次触发加载更多的时候，就执行回调。而不是在最后一次触发的时候执行回调。如果我们一直滚动页面，那加载更多就一直不触发...这种体验是不是很糟糕。
基于上面问题，我们再次进行封装，多添加一个参数。
现假设函数的定义形式为：
window.onscroll = _debounce(function(){
console.log(1);
}, 500, true);
function _debounce(func, wait, immediate) {
var timer = null;
var context, args, result, timestamp;
var later = function() {
var oDate = new Date();
var last = oDate.getTime() - timestamp; // 计算第一次时间戳与当前时间戳的差值。
if (last < wait && last >= 0) { // 在等待时间内触发此函数，重新计时。
timer = setTimeout(later, wait - last);
} else {
timer = null;
if(!immediate) { // 限制immediate 为true时，执行回调函数。
result = func.apply(context, args);
if(!timer) context = args = null;
}
}
}
return function() {
var oDate = new Date();
var callNow = immediate && !timer; // 代表第一次调用立即执行。
timestamp = oDate.getTime(); // 记录下当前时间戳
context = this; // 保存上下文
args = arguments;
if(!timer) { // 第一次触发时，timer为空，进入此分支
timer = setTimeout(later, wait);
}
if(callNow) { // 第一次触发且immediate为true，进入此分支
result = func.apply(context, args);
context = args = null;
}
return result;
}
}
此次封装支持两种形式：
immediate为true时，连续事件触发时，只会在第一次触发的时候执行回调。
immediate为false时，连续事件触发时，只会在最后一次触发的时候执行回调。
