防抖和节流
2018-07-27 本文已影响0人
前往悬崖下寻宝的神三算
防抖
固定时间内函数只执行一次。
使用高阶函数,返回一个被定时器包裹的新函数
//简单实现
var debounce=function (delay,fn,ctx){
if(ctx===undefined){
ctx=this;
}
var timer;
return function(){
var argu=this.arguments;
clearTimeout(timer);
timer=setTimeout(function(){
fn.apply(ctx,argu)
},delay)
}
}
使用
function fn(a,b){...};
var newFn=debounce(100,fn);
newFn('cc',23);//取消
newFn('cc',23);//取消
newFn('cc',23);//执行
注:大多情况,这种方式并不适用,因为程序是延迟执行的
节流
固定时间内函数只执行一次。
var throttle=function(t,fn,ctx){
if(ctx===undefined){
ctx=this;
}
var preT=0;
return function(){
var currT=+new Date();
if(currT-preT>t){
fn.apply(ctx,arguments);
preT=currT;
}
}
}
使用
function fn(a,b){...};
var newFn=throttle(100,fn);
newFn('cc',23);//执行
newFn('cc',23);//取消
newFn('cc',23);//取消