也谈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/