函数节流与函数防抖

在上一篇博客js事件全解中提到了事件的各种用法，有时我们希望一些事件如scroll，resize，keyup等多次触发，但如果过于频繁，会导致界面卡顿，甚至浏览器崩溃。为了不影响性能，又需要限制他的触发频率，这时候就需要使用函数节流(throttle)和函数防抖(debounce)来解决这个问题。

函数节流(throttle)和函数防抖(debounce)都是通过延时逻辑操作来提升性能的方法，在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别，在需要的时候选择合适的方法处理。

而要理解函数节流和函数防抖，又需要理解闭包的知识。

参考资料：函数节流防抖

函数节流(throttle)

函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。

场景：

窗口调整（resize）

页面滚动（scroll）

抢购疯狂点击（mousedown）

实现：

function throttle(method, delay){
var last = 0;
return function (){
var now = +new Date();
if(now - last > delay){
method.apply(this,arguments);
last = now;
}
}
}
function hehe(){
alert('click')
}
//注意，下边的onclick绑定的是throttle函数返回的那个匿名函数
//throttle函数是个闭包，他返回的匿名函数中使用了last，所以他里边定义的last
//不会被销毁，可以一直使用，用来记录上一次执行时候的时间戳
//当疯狂点击的时候，每次点击都会取当前时间戳，如果距离上次执行时间大于delay
//才执行method并且更新last
document.getElementById('Creabine').onclick = throttle(hehe,2000);

函数防抖(debounce)

函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。好像公交司机会等人都上车后才出站一样。

场景：

实时搜索（keyup）

拖拽（mousemove）

实现：

function debounce(method, delay){
var timer = null;
return function(){
var context = this,args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
method.apply(context, args);
},delay);
}
}
function hehe(){
alert('click')
}
//注意，下边的onclick绑定的是debounce函数返回的那个匿名函数
//debounce函数是个闭包，他返回的匿名函数中使用了timer，所以他里边定义的timer
//不会被销毁，可以一直使用，用来通过clearTimeout销毁。
//当疯狂点击的时候，当前点击就会销毁上一次点击设置的计时器
//这样只有最后一次点击能够执行，delay之后执行method
document.getElementById('Creabine').onclick = debounce(hehe,2000)

总的来说，当你疯狂点击一个button的时候：

函数节流会执行函数，但是会限制频率，每隔delay的时间之后会执行一次，会执行多次；

函数防抖会不执行函数，直到你停止点击，并且经过delay的时间之后才执行，只执行一次。