节流与防抖 简单理解及应用

节流与防抖

• 节流

• 将高频操作变成单位时间内只操作一次
• 应用场景：浏览电商网站的商品列表，滑动触底就会加载更多

 window.addEventListener('scroll',this.throttle(this.handlescroll,1000))
   handlescroll(){
      let h = document.documentElement.scrollTop||document.body.scrollTop
      console.log(h)
    }
   //节流函数
    throttle(fn,interval){
      let last = 0; // 记录上次事件调用的事件 第一次默认为0
      return function(){
        let context = this; //保存this
        let args = arguments; //保存参数
        let now = +new Date() //事件开启时记录当前时间(获取当前时间戳getTime())
        if((now-last)>interval){ //如果当前时间减去上次时间大于规定的时间 说明规定的时间到了
          last = now; //保存当前的时间
          fn.apply(context,args)
        }
      }
    },

• 放抖

• 将多次操作合并成一次
• 应用场景：搜索框输入后等待一小段时间才进行搜索

//防抖函数
    //传入执行的方法和延迟的时间
    debounce(fn,timout){
      //每次有操作都会记录一个定时器
      let timer = null;
      return function(params){
        let context = this;
        let args = arguments;
        if(timer){
          //如果有输入 都会清除定时器再重新设置一个新的
          clearTimeout(timer)
        }
        timer = setTimeout(()=>{
          fn.apply(context,args)
        },timout)
      }
    },

• 节流防抖的联用

• 如果一直操作输入就不会出现结果 我们设置一个最大等待时间 超过这个时间就出结果

    betterDebounce(fn,delay){
      let last = 0;
      let timer = null;
      return function(){
        let context = this;
        let now = +new Date();
        let args = arguments;
        if((now-last)<delay){
          clearInterval(timer)
          timer = setTimeout(()=>{
            fn.apply(context,args)
            last = now;
          },delay)
        }else{
          last = now;
          fn.apply(context,args)
        }
      }
    },