刚写完一篇debounce(防抖)函数的实现，我又看了下underscore.js的实现方法。算是趁热打铁，分析一下underscore里实现的套路。
先贴上源码：
_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
var last = _.now() - timestamp;
console.log(last)
if (last < wait && last >= 0) {
console.log(1)
timeout = setTimeout(later, wait - last);
} else {
console.log(2)
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = _.now();
var callNow = immediate && !timeout;
console.log(timeout)
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
一看可能有点多，我简化一下，整体其实就两部分：
_.debounce = function( func, wait, immediate){
// 函数的回调部分
// 当immediate === false时
// func真正的执行部分
function later(){};
return function(){
// 在这里判断func是否立即执行
// 是否有计时器的存在
}
}
上一篇文章已经分析过this的指向和event的传递，这里就不多说了。直接来分析返回的匿名函数部分。
return function() {
context = this;
args = arguments;
// 这里调用了underscore封装的调用时间戳的方法
// 等同于
// timestamp = Date.now()
timestamp = _.now();
var callNow = immediate && !timeout;
console.log(timeout)
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
};
这里我要说的是timestamp，它存储的是动作发生时的时间戳，假设我这里调用debounce时传入的wait为10000，也就是10秒。我第一次调用事件函数是在10:00:00，按照设定，10:00:10之后才能调用第二次方法，在这10秒内，任何调用都是不执行的。
当我第一次执行事件时
timeout = undefined;
immediate先设置为false
所以
callNow === false
只有这句话是执行的
if (!timeout) timeout = setTimeout(later, wait);
那接着来看later都有什么：
var later = function() {
// var last = Date.now() - timestamp;
var last = _.now() - timestamp;
console.log(last)
if (last < wait && last >= 0) {
console.log(1)
timeout = setTimeout(later, wait - last);
} else {
console.log(2)
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
在上一篇中，判断wait内重复输入，我们取消事件的方法是这样的
if(timer){clearTimeout(timer)}
但在这里，我们是不是都还没看到怎么处理wait时间内，重复输入无效的问题？别急，现在就来说。玄妙都在这个last变量上。
之前说过，timestamp存储的是第一次事件执行时的时间戳（10:00:00），但现在我没想等十秒，过了五秒我就触发了第二次事件。所以timestamp现在的内容就变成新的时间戳了（10:00:05）。但问题是，timer的回调函数至少要到10:00:10之后才会执行，也就是说
last>=5
由于代码执行堵塞导致last>10的情况有可能存在，但是不符合我们现在讨论的，而且真的是太特殊了，我们就不说了。那就假设last为5秒（5000ms）。
last < wait && last >= 0
这句话就是true，那就执行里面的代码。但注意看里面计时器对于时间的写法。
wait - last
换个说法就是，你在10:00:00启动了我，但是你在10:00:05又动了，我原本应该在10:00:10执行，但是现在惩罚你提前行动，那你之前等的时间就不算，你要再重新多等这几秒10：00：15。
这个难点解决了，其他就都好说。
lster剩余的部分就是判断如果当初设置的是立即执行（immediate = true），func就不再执行一遍了，否则（immediate = false）func执行。
恩，那这个的解读就结束了，有什么地方我没写清楚的话，请给我留言。
