1、什么是函数节流？

函数节流简单的来说就是避免函数在很短的时间内连续被调用，比如我们最常见的是窗口缩放的时候，经常会执行一些其他的操作函数，比如发一个ajax请求等等事情，那么这时候窗口缩放的时候，有可能连续发多个请求，这并不是我们想要的，或者是说我们常见的鼠标移入移出tab切换效果，有时候连续且移动的很快的时候，会有闪烁的效果，这时候我们就可以使用函数节流来操作。大家都知道，DOM的操作会很消耗或影响性能的，如果是说在窗口缩放的时候，为元素绑定大量的dom操作的话，会引发大量的连续计算，比如在IE下，过多的DOM操作会影响浏览器性能，甚至严重的情况下，会引起浏览器崩溃的发生。这个时候我们就可以使用函数节流来优化代码了~

2、函数节流的基本原理

使用一个定时器，先延时该函数的执行，比如使用setTomeout()这个函数延迟一段时间后执行函数，如果在该时间段内还触发了其他事件，我们可以使用清除方法 clearTimeout()来清除该定时器，再setTimeout()一个新的定时器延迟一会儿执行。

函数节流的第一种封装方式：

function throttleFunc(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}

函数节流的第二种封装方式（最常用的）：

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

函数节流的第三种封装方式：

function throttle(fn,delay,runDelay){
var timer = null, t_start;
return function(){
var context = this,args = arguments,t_cur = new Date();
t_start = !t_start && t_cur;
timer && clearTimeout(timer);
if(t_cur-t_start>=runDelay){
fn.apply(context,args);
t_start = t_cur;
}else{
timer = setTimeout(function(){
fn.apply(context,args);
},delay);
}
}
}