节流

节流：控制事件执行次数

事件高频触发，控制执行次数（平A）
案例：滚动就触发

<style>
        body{
       height:2000px
   }
    </style>
</head>
<body>
   
    <script>
        
     window.onscroll=function(){
         console.log('hello');
     }
    </script>

如何控制打印次数？
思考步骤：
1.

<script>
       let flag=true 
     window.onscroll=function(){
         if(flag){
             setTimeout(function(){
                console.log('hello');
             },1000)
         }
         flag=false
     }
    </script>

1秒后执行打印，只执行一次

<script>
       let flag=true 
     window.onscroll=function(){
         if(flag){
             setTimeout(function(){
                console.log('hello');
			flag=true
             },1000)
         }
         flag=false
     }
    </script>

平均1秒执行一次

2.利用闭包封装节流

<script>
       
     window.onscroll= throttle(function(){
         console.log('hello');
     },1000)
     function throttle(fn,delay){
          let flag = true
        return function() {
             if (flag) {
                 setTimeout(function () {
                    fn.call(this)
                    flag=true
                 }, delay)
             }
             flag = false
         }
     }
    </script>
posted @ 2022-04-05 15:39  Kira的学习笔记  阅读(35)  评论(0)    收藏  举报