javaScript中的函数节流与函数防抖
javaScript中的函数节流与函数防抖
问题：在实际开发中我们很可能用到resize和mousemove等事件，但是这些会频繁的触发，如果是在对应的事件处理函数写一些操作dom的方法的话或者说发送一些ajax请求的话，这样肯定非常耗性能，并且给用户的体验也不好。
函数节流
函数节流的原理：持续触发一个事件，每隔一段的时间，事件只会执行一次。simplely speaking，就像一个水龙头，我们把它关得很小，流水事件一直在触发，但是是每隔一定的事件才滴出一滴水滴。
实现方式： 一般有两种，第一就是使用时间戳，第二就是使用setTimeout定时器。
使用时间戳方式：当我们触发事件的时候，取出当前的时间戳，求出当前时间戳和前一次执行的时间戳的差值，如果差值大于我们设定的时间间隔，那么就执行该动作，并更新执行时间，否则，就不执行该动作。
//《JavaScript高级程序设计》
//节流函数
function throttle(method,context){
//清除上一次的定时器
clearTimeout(method.tId);
//重新设置定时器，设定当前周期之后调用
method.tId = setTimeout(function(){
//这里是真正要执行的操作
method.call(context);
},100);
}
//处理函数
function handOpe(){
/*do something what you want*/
}
//regist the aciton at the object named window
window.onresize = function(){
throttle(handOpe,window);
}使用定时器方式：使用定时器的原理就是，当事件触发的时候，检查定时器是否存在，如果存在说明函数还没有执行（因为函数执行中我们清空了timeoutId）所以这个时候我们就不执行，等它执行，并清空定时器，这个时候就可以设置下一个定时器了。
...compare
- 第一种（时间戳）事件会立即执行，第二种事件会在wait秒后执行
- 第一种事件停止后没有办法再执行，第二种事件停止后依然会再执行一次事件函数。
函数防抖
函数防抖 ：如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
原理：通俗的将就是你尽管触发事件，但是我一定在事件触发n秒后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后才执行，总之，就是要等到你触发完事件n秒内不再触发事件。
最简陋的函数防抖方式
//例如给添加的onmousemove事件
var count = 1;
var container = document.getElementById("container");
function moveAction(){
container.innerHTML = count++;
}
//注册鼠标移动时间
container.onmousemove = debounce(moveAction,1000);
//函数防抖，外面包一层函数debounce的原因是里层函数形成闭包，保存外部函数的变量，也就是上一次的timeoutId，以此方便后面清除。
function debounce(func,wait){
var timeout;
return function(){
clearTimeout(timeout);
timeout = setTimeout(func,wait);
}
}不使用debounce的时候，注册的事件处理程序的this指向的是id为container的dom节点，但是使用了debounce函数以后this值指向了window，是由于由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。 详细可参考MDN setTimeout 这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined，这和所期望的this的值是不一样的。 为了保证一致性，对debounce函数改写如下
function debounce(func,wait){
var timeout;
return function(){
var context = this;
clearTimeout(timeout);
setTimeout(function(){
func.apply(context);
},wait);
}
}但是上面的debounce函数还是有问题，就是事件处理函数一般都会传入事件对象e，通过事件对象获取一些数据，但是在上面代码中指定的func里面获取事件对象为undefined，因为根本就没有传如其它的参数，因此需要传入参数。改写如下
function debounce(func,wait){
var timeout;
return function(){
var context = this;
var args = arguments;//接收到参数
clearTimeout(timeout);
setTimeout(function(){
func.apply(context,args);
},wait);
}
}函数节流（throttle）与函数防抖（debounce）应用场景
函数节流（throttle）
- 频繁的mousemove/keydown，比如高频的鼠标移动，游戏射击类的
- 搜索联想（keyup）
- 进度条（我们可能不需要高频的更新进度）
- 拖拽的dragover等
高频的点击，抽奖等
函数防抖（debounce）
scroll/resize事件
- 文本连续输入，ajax验证/关键字搜索
更多高级的用法，可以参考下面的链接中！
参考：
JavaScript专题之跟着 underscore 学节流
JavaScript专题之跟着underscore学防抖