函数节流
定义: 函数节流就是每间隔一定时间触发/调用函数一次
优点: 优化系统性能
思路: 我们在初始的时候定义一个begin开始时间,当时间间隔超过duration时,则执行一次函数,这样我们做到了不重复调用,又能保证固定时间间隔执行一次。
函数节流原理:
function scrollFn(){
console.log(1)
}
function throttle(method,delay,duration){
var timer=null;
// 定义开始时间
var begin=new Date();
return function(){
var context=this, args=arguments;
// 定义当时时间
var current=new Date();
clearTimeout(timer);
// 当时间间隔超过duration,则执行函数
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}
window.onscroll=throttle(scrollFn,100,500)
我们在初始的时候定义一个begin开始时间,当时间间隔超过duration时,则执行一次函数,这样我们做到了不重复调用,又能保证500秒执行一次。