0
点赞
收藏
分享

微信扫一扫

js中的函数节流


对于常见的场景,1、使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作,其高频率的更改可能会让浏览器崩溃。 
2、我们常见的一个搜索的功能,我们一般是绑定keyup事件,每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。

大部分节流都采用时间做节流,即时间间隔小于多少的不再调用,但同时保证一个最小调用间隔。(否则拖拽类的节流都将无效果),也可以用调用次数做节流,但要考虑最后一次调用需要要执行。

概念:函数节流是通过一个定时器,阻断连续重复的函数调用,从而一定程度上优化性能。

用途:主要用于用户界面调用的函数,如:resize、mousemove、keyup事件的监听函数。 
这类监听函数的主要特征: 
1、短时间内连续多次重复触发; 
2、大量的DOM操作。

意义:在用户察觉范围外,降低函数调用的频率,从而提升性能

函数节流的原理

函数节流的原理挺简单的,那就是定时器。当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样。

具体代码的实现,看到一个不错的方法:impress用的一个封装函数:

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

它使用闭包的方法形成一个私有的作用域来存放定时器变量timer。而调用方法为

window.onresize = throttle(myFunc, 100);

如果想要了解更多,参考文章:​​http://www.alloyteam.com/2012/11/javascript-throttle/​​

举报

相关推荐

0 条评论