函数防抖函数节流
事件频繁被触发,频繁执行DOM操作、资源加载等重复行为,导致UI停顿甚至浏览器崩溃。
函数节流和函数防抖用于限制函数的执行。是优化高频率执行js代码的一种手段。
函数防抖
函数防抖就是让某个函数在上一次执行后,满足等待某个时间内不再触发此函数后再执行,而在这个等待时间内再次触发此函数,等待时间会重新计算。
如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后,才执行该动作,若在这n毫秒内又调用该动作,则将重新计算执行时间。
var debounce = function(idle,action){
var last;
return function(){
var ctx = this,
args = arguments;
clearTimeout(last);
last = setTimeout(function(){
action.apply(ctx,args);
},idle);
}
}
返回函数连续调用时,空闲时间必须大于或等于idle,action才会执行。
函数节流
每隔某个时间去执行某函数,避免函数的过多执行。
如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。也就是说会先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。
var throttle = function(delay,action){
var last ;
return function(){
var cur = +new Date(); //返回毫秒数
if(cur - last > delay){
action.apply(this,arguments);
last = cur;
}
}
}