简单的防抖、节流

一、防抖

防抖：适用于 输入框 输入内容进行搜索(解决短时间内高频触发某事件导致响应速度跟不上频率) 等

1. 简单粗暴

  public searchTimer=null;
  searchChange(data){
    if(!data) return;
    clearTimeout(this.searchTimer);  //区别节流
    this.searchTimer=setTimeout(()=>{
      //做的事情
    },300)
  }

2. 封装优化

//防抖封装
function debounce(fun,wait){
    let timer=null;
    return function(arg){
        if(timer) clearTimeout(timer); //区别节流
        timer=setTimeout(_=>{
            fun.call(this,arg)
        },wait)
    }
};
//方法定义
let bb=debounce(function(da){
    //方法的其他操作
},500);
//频繁的方法调用
document.querySelector("#btn").addEventListener("click", function(){
    bb('dasdd');
});

二、节流

节流：适用于 滚动条 滚动高频触发事件==>会按照固定频率(解决短时间内高频触发某事件导致响应速度跟不上频率) 等

1. 简单粗暴

  public searchTimer=null;
  searchChange(data){
    if(!data) return;
    if(this.searchTimer) return //区别防抖
    this.searchTimer=setTimeout(()=>{
        //做的事情
    },300)
  }
///直接调用方法

2. 优化封装 延迟调用

//节流封装
function throttle(fun,wait){
    let timer=null;
    return function(arg){
        if(timer) return;  //区别防抖
        timer = setTimeout(()=>{
            fun.call(this,arg);
            timer = null;
        },wait);
    }
}

3. 优化封装 直接就调用

function throttle(func,wait){
  let lastTime = 0;
  return function(...args) {
     const now = Date.now();
      if (now - lastTime >= delay) {
        func.apply(this, args);
        lastTime = now;
      }
  };
}
// 方法定义
let cc=throttle(function(ar){
    //做的事情
},1000)
 //频繁的方法调用
 document.addEventListener("scroll", function(){
      cc('dasdd');
 });