[JavaScript知识库]Web前端必做笔记之一：防抖和节流(二)

Web前端必做笔记之一：防抖和节流(二)

<script>
       
       let  inp = document.querySelector("input");
       let t = null; //全局变量，
       inp.oninput = function(){  
             
            //防抖
             if(t !== null){
                   clearTimeout(t); 
             }
                        
           t = setTimeout(()=>{
                   console.log(this.value);
                  
             },500) 
       }
 </script>      

首先我们看到这个代码，是不是感觉就很混乱，当我们来改的时候，就很懵，一下子看不出来，这是干嘛的。
这混乱在那里呢，1.建立了个全局变量，2.防抖的逻辑和真正的业务逻辑混在一起。这就不利于维护
那怎么解决呢？

<script>
inp.oninput  =  debounce(function(){  //debounce返回值是一个函数，就是oninput事件执行的函数
        console.log(this); //这里this指向Window全局对象，这里面的函数传进去之后其实执行的是fn，那怎么让这个this指向input呢
        console.log(this.value);
 },500)


 //这里利用闭包，来封装一个防抖的方法
 //这里希望oninput这个事件的逻辑能够执行debounce里面的函数，就给debounce里加个fn,而delay是延时事件
 //传进fn,就实现了 这个业务逻辑和防抖的隔离

 function debounce(fn,delay){  //外部函数
       let t = null;
       return  function(){  //内部函数
                 if(t !==null){
                        clearTimeout(t);
                 } 
                 t = setTimeout(()=>{
               
                  fn.call(this);  //通过call改变this指向
                 },delay)
          }
 }


</script>