节流防抖

98 阅读1分钟

1、防抖

实现效果

只对最后一次键盘事件进行事件处理

<body>
    <input type="text" id="input">
    <script>
       function fn(){
           let time;
           console.log('提前打印');
           return function(){
            clearTimeout(time);
            time = setTimeout(()=>{
               console.log('hello world');
           },2000);
           }
       }
       const input = document.getElementById('input')
       /*
           fn()会先执行,每次键盘事件都是执行的fn()里面的匿名函数,而不是fn函数,
           比如console.log('提前打印');会在键盘事件之前就执行,
           且无论怎么点击,console.log('提前打印')都不会执行
       */
       input.addEventListener('keyup',fn())
    </script>
</body>

2、节流

实现效果

规定的时间内无论点击多少次,都只会执行一次

<body>
   <button id="btn">点击</button>
   <script>
       function fn() {
           let time;
           return function () {
               if (!time) {
                   time = setTimeout(() => {
                       time = null;
                       alert('hello world');
                   }, 1000);
               }
           }
       }
       const btn = document.getElementById('btn');
       btn.onclick = fn()
   </script>
</body>

闭包就相当于提前开辟一块内存,每次都是在这块内存上面进行操作