正文
也谈js函数节流
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、什么是js函数节流
其本质就是不让某些代码（函数）在没有间断的情况下连续重复执行，目的就是让执行函数的请求停止了一段时间后才执行。
2、函数节流运用的场景
窗口大小的改变（resize事件），滚动事件（scroll事件），鼠标移动事件（mousemove事件），touchmove事件(做过手机端的同学一定知道，手机中手指滑动其实触发了多次touchmove)，我们在绑定这些事件的时候，函数会被多次执行，因为性能的需要，此时函数节流就派上用场！
3、函数节流的书写基本形式
网上也提供很多关于函数节流的模式,根据自身的需要，正常写法有以下几种：
（1）对象字面量的方式：
<script type="text/javascript">
var throttle={
timeoutId:null,
performProcessing:function(){
console.log("节流")
},
process:function(){
clearTimeout(this.timeoutId);
var that=this;//为什么要设置这个，亲，setTimeout可是会改变this的指针指向window哦
this.timeoutId=setTimeout(function(){that.performProcessing()},250)
}
}
window.onresize=function(){
throttle.process();
}
</script>
当调用process函数的时候，就清除timeoutId来阻止之前的队列函数，然后创建一个新的定时器去调用performProcessing。时间的间隔是250ms，指的是最后一次调用process（）之后至少250ms后才会继续调用performProcessing。250ms，代表着在250ms的时间内，不管调用了多少次，performProcessing只会被执行一次（而且是在最后一次被调用的那个函数间隔250ms才添加到队列并执行，如果你一直不间断触发函数，那么performProcessing将永远不会被执行）。
（2）函数式的方式：
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context) //改变作用域
},250)
}
function resizeFunc(){
console.log(1)
}
window.onresize=function(){
throttle(resizeFunc)
}
这种函数节流看来已经不错了，可是发现我们在调用的时候和第1种方式（对象字面量方式）是一样的，这个时候问题就来了。如果页面多次调用，显然这种方式是无法通过参数来改变函数执行的频率（delay），所以难形成共用！怎么办呢？
那是否有更好的方法呢？如果能把delay的参数放出来呢？所以有了下面的函数写法：
<script type="text/javascript">
var throttle = function(fn, delay){
var timer = null;
return function(){var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
};
function printed(){
console.log(1)
}
window.onresize=throttle(printed,250)
</script>
这种方式，脑海中想到的是闭包，没错！就是通过js的闭包的方式，返回函数，通过timer的变量来控制函数的执行！改造完成以后基本能够满足了我们的需求！感觉大功告成了，哈哈！
可是，发现了没有，如果我不间断地执行某个函数，假设执行了300ms后才停下来，那么意味着setTimeout只有在300ms后才添加到队列，然后执行，那我们所想象的mousemove不就是一闪一闪的结果吗？（因为执行的频率太多频繁而无法立即出发setTimeout），所以我们肯定有必要在规定的时间内，移动要执行某个函数一次，这样就可以必选视觉的误差！所以我们规定了某个函数在视觉允许的范围内，固定时间至少调用一次！
<script type="text/javascript">
function throttle(fn,delay,duration){
var timer=null,last_exec=0;
return function(){
var context=this,args=arguments,elapsed = +new Date();
clearTimeout(timer);
if(!last_exec){
last_exec = elapsed;
}
if(elapsed-last_exec > duration){
fn.apply(context, args);
last_exec=elapsed;
}else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
}
} function resizeFunc(){
console.log(1)
}
window.onresize=throttle(resizeFunc,50,5000)
</script>
函数的原理很简单，每次执行函数的时候，判断当前的时间elapsed与上一次函数执行的时间的间隔大于delay的时候（elapsed-last_exec）就执行函数fn，然后将last_exec设为当前的日期，这样就可以达到了我们的目的了！
到这里，认为节流的函数已经结束了饿，可是你看的越多发现自己越无知，有木有呢？因为jquery最近版本已经有了throttle的函数了，把其中的代码如下：
(function(window,undefined){
'$:nomunge';
var $ = window.jQuery || window.Cowboy || ( window.Cowboy = {} ),jq_throttle;
$.throttle = jq_throttle = function( delay, no_trailing, callback, debounce_mode ) {
var timeout_id,last_exec = 0;
if ( typeof no_trailing !== 'boolean' ) {
debounce_mode = callback;
callback = no_trailing;
no_trailing = undefined;
}
function wrapper() {
var that = this,
elapsed = +new Date() - last_exec,
args = arguments;
function exec() {
last_exec = +new Date();
callback.apply( that, args );
};
function clear() {
timeout_id = undefined;
}; if ( debounce_mode && !timeout_id ) {
exec();
}
timeout_id && clearTimeout( timeout_id );
if ( debounce_mode === undefined && elapsed > delay ) {
exec();
} else if ( no_trailing !== true ) {
timeout_id = setTimeout( debounce_mode ? clear : exec, debounce_mode === undefined ? delay - elapsed : delay );
}
};
if ( $.guid ) {
wrapper.guid = callback.guid = callback.guid || $.guid++;
}
return wrapper;
};
$.debounce = function( delay, at_begin, callback ) {
return callback === undefined
? jq_throttle( delay, at_begin, false )
: jq_throttle( delay, callback, at_begin !== false );
};})(this);
throttle函数的几个参数的说明：
delay：延迟的时间（Number）
no_trailing:默认是false（Boolean），可选参数！如果是false，那么固定每个一段时间（delay）定会调用一次callBack函数，如果是true，那么意味着callBack只会执行最后一次在throttle函数被触发后（听起来晕晕的！请看下图）：其实可以理解为：在250ms的时间内，如果函数200ms就执行完了，那么no_trailing=true的时候就不触发callBack,no_trailing=false的时候就促发callBack
// > Throttled with `no_trailing` specified as false or unspecified:
// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
// > X X X X X X X X X X X X
// >
// > Throttled with `no_trailing` specified as true:
// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
// > X X X X X X X X X X
callBack：就是间隔delay时间要执行的函数
debounce_mode:可选，不传递任何参数就是undefined！如果是传递的是false的时候，那么就是追后一次执行事件delay的时间后调用callBack（没有固定的时间调用一次），如果debounce_mode=true,事件触发后立刻执行callBack，最后一次事件在delay的时间后触发callBack，开始就触发callBack函数（debounce_mode=false则不是）
debounce函数的几个参数的说明：
delay：延迟的时间（Number）
at_begin:默认false，at_begin=false意味着callBack会在debounce函数最后一次触发函数后执行！
// > Debounced with `at_begin` specified as false or unspecified:
// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
// > X X
// >
// > Debounced with `at_begin` specified as true:
// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
// > X X
callBack：就是间隔delay时间要执行的函数。
到这里，函数节流就算结束了，jquery中的封装比较难理解！但是我们只要知道调用方式和参数的作用即可！最后附上参考的网址：
地址：http://benalman.com/projects/jquery-throttle-debounce-plugin/
