Web前端必做笔记之一：防抖和节流（一）

Web前端必做笔记之一：防抖和节流（一）

 <input type="text">
<script>
      let  inp = document.querySelector("input");

inp.oninput = function(){  //oninput事件：当我们输入内容时就会触发
   
    console.log(this.value);
}
</script>

我们可以看到当我打出’前端’两个字时，从 ‘q’ 到’前端’执行了很多次事件，那每一次输入都是与后台进行数据交互，那这就很影响性能，敲一个字母，就与后台进行一次数据交互，就请求一次数据，那这性能就很惨。而这就有了防抖.

<script>
       //防抖 :用户触发事件过于频繁，只要最后一次事件的操作
       let  inp = document.querySelector("input");
       let t = null; //用它来控制事件是否触发
       inp.oninput = function(){  //oninput事件：当我们输入内容时就会触发
          
             if(t !== null){
                   clearTimeout(t); //如果不是最后一次，就把之前的事件清掉
             }
             
             //如果事件被触发了，那它是最后一次，就直接执行计算器操作
           t = setTimeout(()=>{
                   console.log(this.value);
                  
             },500) 
       }
</script> 

你在连续输入，我就不触发这个事件，但是你这次输入超过0.5秒那就触发。