节流防抖

2021-01-25 154 阅读1分钟

debounce防抖就是防止手抖多点了

// 错误的3代码
    let btn=document.querySelector('button');
    btn.onclick=function(){
      setTimeout(()=>{
          console.log(111)
      },1000)
    }
// 如果只有定时器控制的话，多点几下就会一下子出来特别多
// 因为 setTimeout 并不会等到执行完一个之后再等1s再执行，这是定时器工作原理。

那么我们目标是快速点多下，我们只让最后一下产生效果
先清空定时器，然后再立马创建一个新的定时器在线示例

let btn=document.querySelector('button');
    let timer=null;
    btn.onclick=function(){
      clearTimeout(timer)
      timer=setTimeout(()=>{
          console.log(111)
      },1000)
    }

throttle节流

let btn=document.querySelector('button');
    let flag=true;
    btn.onclick=function(){
      if(flag){
        flag=!flag;
        console.log(111)
        let timer=setTimeout(()=>{
          flag=!flag;
          clearTimeout(timer);
          timer=null;
        },1000)
      }      
    }

用途示例

这些事件:keyup scroll resize mousemove
搜索框的联想建议

节流与防抖的区别

目的都是为了降低频率，
防抖是我不想让它如此频繁，只在最后一次事件操作即可
节流是依然想让它频繁触发，只不过不要那么频繁就好

假设你一直高频的点击一个按钮，
节流的逻辑会始终保持间隔1s执行一次，
而防抖的逻辑是我只执行你最后点击的那一次

面试问你如何实现节流防抖

在产生事件时取消上一次定时器，再开启一个新的定时器，这就是防抖
在产生事件时判断一下节流阀，如果节流阀为true，立马设置节流阀为false，然后执行你要的操作，同时开启新的定时器，定时器结束时再让节流阀为true