对于高频率的事件触发，为了优化页面性能，我们一般会对其做函数节流。比如: resize、keydow、scroll事件等。用户的频繁操作，会导致事件高频率的执行，这样会出现页面抖动啊、频繁调接口啊等问题。为了优化，我们采用函数节流，原理就是利用setTimeout控制触发回掉的频率。
1.第一种方案：
var timer;
function throttle1(fun,sec){
clearTimeout(timer);
timer = setTimeout(function(){
fun();
},sec);
} $(function(){
$(window).scroll(function(){
throttle1(function(){
console.log('我滚！！！');
},500);
});
});
第一种方案最简单，原理一看就懂，用setTimeout的目的是在用户触发之后到500毫秒之内不会执行回调，500毫秒才会执行回调一次，对于之前的事件触发是没有执行回调的。但缺陷是无法获取回调的传入参数，即使可以获取，也不能保证执行上下文this的指向。
2.第二种方案：
function throttle2(fun,sec){
var timer = null;
return function(){
clearTimeout(timer);
var context = this,arg = arguments;
timer = setTimeout(function(){
fun.apply(context,arg);
},sec);
timeer = null;
}
}
$(function(){
$(window).scroll(
throttle2(function(){
console.log('我滚！！！');
},500)
);
});
第二种方案能保证回调函数的执行上下文，支持回调的多参数传入。
但是大家都知道setTimeout是一个异步函数，会被挂起，放到异步队列的最后。当主线程执行完之后，才会执行异步队列里的回调。在用户不停的操作：如不停的滚动滚动条、改变窗口大小的时候，setTimeout是会被挂起，只有在用户操作完，才会执行setTimeout的回调。那么问题来了，用户一直操作会影响正常功能使用啊！那第三种方案就是为了解决setTimeout被挂起之后，回调函数不执行的问题。
3.第三种方案：
function throttle3(fun,sec,mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_curr = +new Date();
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay){
fun.apply(context, args);
t_start = t_curr;
}else {
timer = setTimeout(function(){
fun.apply(context, args);
}, sec);
}
}
}
$(function(){
$(window).scroll(
throttle3(function(){
console.log('我滚！！！');
},500,1000)
);
})
利用第三种方案，就完美的解决了setTimeout被挂起的情况，保证用户的正常操作效果。