javascript性能优化之函数节流

函数节流技术的主要思路是,通过一个定时器,阻断连续重复的函数调用。对于我们自己内部使用的函数,这通常意义不大,也不推荐使用这个技术,它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数,却非常有意义。例如一个 mousemove 或者 IE 中 resize 事件的监听函数。

参考

关于函数节流这篇文章分析的很好值得一看
浅谈函数节流

这类事件监听函数往往伴随着两个主要特征:

  1. 短时间内连续多次重复触发 ;
  2. 大量的 DOM 操作。

众所周知,DOM 操作对内存和 CPU 的开销是比较大的,特别是当同时满足特征1时,往往给浏览器造成不小的压力。函数节流技术的意义在于在用户察觉范围外,降低函数调用的频率,从而提升性能。

var throttleV2 = function(fn, delay, mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_curr = +new Date();//+new Date() 转换成毫秒
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay){
fn.apply(context, args);
t_start = t_curr;
}
else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
};

关于+new Date()

参考+new Date

sunbaixin wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!