js

448 阅读1分钟

1.防抖、节流

防抖:事件触发ns后执行。如果在这一段时间时间内重复操作会重新计时。

应用场景:监听用户输入,在用户停止输入后的一段时间触发

防抖分为立即执行和非立即执行

非立即执行

function debounce(fn,delayTime){
  let timer = null;
   return function(){
     let that = this;
     let args = arguments;
     timer && clearTimeout(timer);
     timer = setTimeout(function(){
       fn.apply(that,args);
     },delayTime);
   }
}

立即执行

function debounce(fn,delayTime){
  let timer = null;
  return function(){
    let that = this;
    let args = arguments;
    timer && clearTimeout(timer);
    let flag = !timer;
    timer = setTimeout(function(){
      timer = null;    },delayTime);
    flag && fn.apply(that,args);
  }
}

节流:一个固定单位之间内只能触发一次。如果触发多次只有一次生效

应用场景:监听滚动条、鼠标事件,为节约性能,减少频繁触发

时间戳

function tottled(fn,delayTime){
  let start = Date.now();
   return function(){
     let that = this;
     let args = arguments;
     let now = Date.now();
     if(now-start > delayTime){
        fn.apply(that,args);
        start = Data.now();
     }
   }
}

定时器

function tottled(fn,delayTime){
  let timer = null;
  return function(){
    let that = this;
    let args = arguments;
    if(!timer){
       timer = setTimeout(function(){
          fn.apply(that,args);
           timer = null;
       },delayTime);
    }
  }
}