Javascript函数节流

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);
}
}
}

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章