您的位置：首页 > Web前端 > JavaScript

javascript函数节流

2016-09-09 12:07 561 查看

函数节流简单讲就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。函数节流原理：用定时器，当触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行。

《JavaScript高级程序设计》中介绍的函数节流：

function throttle(method,context){
clearTimeout(method,tId);
method.tId=setTimeout(function(){
method.call(context);
},100);
}
//调用
window.onresize=function(){
throttle(myFunc);
}

//法二：
var throttle=function(fn,delay){
var timer=null;
return function(){
var context=this,args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
fn.apply(context,args);//context调用fn的方法，指针指向了fn
},delay);
}
}
//调用
window.onresize=throttle(myFunc,100);
函数节流让一个函数只有在你不断触发后停下来歇会才开始执行，中间你操作得太快它直接无视你。这样做就有点太绝了，resize一般还好，但假如写一个拖拽元素位置的程序，然后直接使用函数节流，会发现你拖动时元素是不动的，你拖完了它直接闪到终点去，所以进行优化：
var throttleV2=function(fn,delay,mustRunDelay){
var timer=null;
var t_start;
return function(){
var context=this,args=arguments,t_curr=+new Date();
clearTimeout(timer);
if(!s_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);
}
}
}
window.onresize=throttleV2(myFunc,50,100);解析：50ms的间隔内连续触发的调用，后一个调用会把前一个调用的等待处理掉，但每隔100ms至少执行一次。
1.具有节流效果的tab切换案例：

var timer=null;
function tab(obj){
var target = document.getElementById(obj);
var spans = target.getElementsByTagName("span");
var lis = target.getElementsByTagName("li");
for(var i=0;i<spans.length;i++)
{

spans[i].onmouseover = function(num){
return function(){
clearTimeout(timer);
timer=setTimeout(function(){
for(var j=0; j<spans.length;j++)
{
spans[j].className = "";
lis[j].className = "";
}
spans[num].className = "current";
lis[num].className = "show";
},300);
}
}(i);
spans[i].onmouseout=function(){
clearTimeout(timer);
}
}

}
tab("one");2.屏幕缩放节流案例：
<body>
<div id="demo"></div>
</body>
</html>
<script>
var demo=document.getElementById("demo");
var num=0;
window.onresize=throll(function(){
demo.innerHTML=window.innerWidth || document.documentElement.clientWidth;
num++;
alert(num);
},300);
function throll(fn,delay){
var timer=null;
return function(){
clearTimeout(timer);
timer=setTimeout(fn,delay);
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 节流

相关文章推荐

新的分享

章节导航