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

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

<script>
      window.onscroll = function(){ //触发滚动条事件
            console.log('123');
      }
 </script>     

我们可以看到一滚动，几秒就触发了100次事件，我们想一下，在滚动的过程，发生交互数据，就触发了100次，这是不能接受的。这就有了节流

<script>
       //仿抖：只执行最后一次
      //节流:控制执行次数
      //节流作用：控制高频事件执行次数
      let  flag = true;
      window.onscroll = function(){ //触发滚动条事件
           
             if(flag){
                     setTimeout(()=>{  //只要执行setTimeout,flag就为true，就可以继续执行
                           console.log("hello world");
                           flag = true;
                     },500)
             }
            
             flag = false; //如果没执行setTimeout,flag就为false，就不执行
      }


</script>

<script>
//这里对节流进行封装，与防抖封装类似。
window.onscroll = throttle(function(){
      console.log("hello world");
},500)

function throttle(fn,delay){
            let  flag = true;
            return function(){
                  if(flag){
                  setTimeout(()=>{
              
                  fn.call(this);
                  flag = true;
                  },delay)
            }
            flag = false;
            }
 }
</script>

总结：

          1.防抖 :用户触发事件过于频繁，只要最后一次事件的操作
          2.节流作用：控制高频事件执行次数