全栈前端

防抖和节流

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);//取消
上一篇下一篇

猜你喜欢

热点阅读