javascript:函数节流（throttle）与函数去抖（debounce）

一、前言

在开发中往往由于一些事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致页面卡顿，用户体验差。常见事件如下：

1. window对象的resize、scroll事件

2. 鼠标事件：拖拽mousemove事件、mousedown事件

3.键盘事件：keypress、keyup、keydown事件

就以上几个事件来说，对于resize事件，实际情况大多为停止改变大小n毫秒后执行后续处理；而其他事件大多是以一定的频率执行后续处理。那么针对这两种情况就出现了debounce（去抖）和throttle（节流）两种解决办法。

二、debounce

之前看到有人将其比喻为弹簧，要是一直按着不会就弹起，只有将手拿起弹簧才会弹起。也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。举几个例子：

（1）场景一：改变窗口大小执行某事件

var resizeTimer=null;

$(window).on('resize',function(){

console.log("resize!!!");

if(resizeTimer){
clearTimeout(resizeTimer);
}

resizeTimer=setTimeout(function(){
console.log("resize debounce!!!");
　　　　　　　//fn do something
},400);

})

执行后效果如下：若在400ms后不改变窗口大小即执行 fn，对比可看出能对性能进行很好的优化

(2)场景二：类似百度搜索框的自动提示功能时候，使用了AJAX+keydown事件

function debounce(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}

调用：

$('input.username').keydown(debounce(function (event) {
// do the Ajax request
}, 250));

三、throttle

就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。举例：

var throttle = function(delay, action){
var last = 0return function(){
var curr = +new Date()
if (curr - last > delay){
action.apply(this, arguments)
last = curr
}
}
}