前言
前端时间在面试中，面试官让我写一个关于input输入框，并且实时搜索的问题，我就当然用keyup事件来写，写完面试官还是挺满意的。又问我一个问题，如何减少每次输入频繁请求的性能开销。这个我就犯难了。事后，我百度了下，查到了throttle（节流）和debounce（去抖）。
我还百度到，这些事件的运用场景：
- 鼠标事件：mousemove(拖曳)/mouseover(划过)/mouseWheel(滚屏)
- 键盘事件：keypress(基于ajax的用户名唯一性校验)/keyup(文本输入检验、自动完成)/keydown(游戏中的射击)
- window的resize/scroll事件(DOM元素动态定位)
debounce实现
throttle：连续的时间间隔(每隔一定时间间隔执行callback)。
debounce：空闲的时间间隔(callback执行完，过一定空闲时间间隔再执行callback)。
自己实现一个debounce：
主要思路是通过一个不断清除定时器，创建定时器的过程。
/**
*
* @param func {Function} 实际要执行的函数
* @param wait {Number} 延迟时间，单位是毫秒（ms）
* @param wait {Boolean} 一定时间内，先执行／后执行
*
* @return {Function} 返回一个“去抖”了的函数
*/
var debounce = function(func, wait, immediate) {
// 设置定时器
let timeout;
return (...args) => {
const later = () => {
timeout = null;
if (!immediate) func.apply(this, args);
};
const callNow = immediate && !timeout;
// 进入先清除定时器
claerTimeout(timeout);
// 重新设置一个定时器，如果没有连续触发函数，就执行定时器，也是就是核心原理
timeout = setTimeout(later, wait);
if (callNow)
func.apply(this, args);
}
}；
我们下面来看一个实例：
window.addEventListener('resize',debounce(function(){
console.log(1);
},1000,true));
可以看到，你如果一直快速的改变浏览器的大小，console.log(1);只会执行一次。只有在你规定的时间内，不发生第二次改变，他才会再一次地输出console.log。
_的.debounce()分析
underscore(v1.8.3)：
_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
var last = _.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
// wait-last 用来补充触发时的时间，从而达到从触发到下一次触发这又一个设定的闭环时间。
} else {
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;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
可以看到underscore的实有些不同，他的每一次定时器不清除timeout = setTimeout(later, wait);这个语句，每隔wait时间，会触发一次，但是在later函数中，会进行判断，如果在规定时间内再次触发这个函数，是不会触发func的。
lodash：
在lodash中的实现和我自己实现的异曲同工。想要看细节，请移步lodash官网吧。
throttle实现
自己实现一个throttle
核心思想，通过记录时间差，来判断是否执行func。
/**
*
* @param fn {Function} 实际要执行的函数
* @param delay {Number} 执行间隔，单位是毫秒（ms）
*
* @return {Function} 返回一个“节流”函数
*/
function throttle(fn, threshhold) {
// 记录上次执行的时间
var last
// 定时器
var timer
// 默认间隔为 250ms
threshhold || (threshhold = 250)
// 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
return function () {
// 保存函数调用时的上下文和参数，传递给 fn
var context = this
var args = arguments
var now = +new Date()
// 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
// 执行 fn，并重新计时
if (last && now < last + threshhold) {
clearTimeout(timer)
// 保证在当前时间区间结束后，再执行一次 fn
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, threshhold)
// 在时间区间的最开始和到达指定间隔的时候执行一次 fn
} else {
last = now
fn.apply(context, args)
}
}
}
_的.underscore()分析
underscore(v1.8.3)：
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : _.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _.now();
// 记录第一次进入时间
if (!previous && options.leading === false) previous = now;
// 剩余时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 判断是否间隔规定时间
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
lodash中的实现只是将debounce封装了一层，就不进行讲解了。
参考文章：http://www.qidiantong.com/javascript/3876.html
