防抖与节流

防抖与节流是闭包运用非常典型的案例

防抖

简单概述：当持续触发该事件，一定时间内不触发，则执行该事件处理函数，如果在执行该事件处理函数之前又触发了一次，则重新开始计时,具体代码如下

 function debounce(func,delay){
        let timer;
        return function (args){
            clearTimeout(timer);
            timer = setTimeout(function(){
                func(args)
            },delay)
        }
    }

一个小案例的运用

    <button id="btn">按钮</button>
   <script>
    function debounce(func,delay){
        let timer;
        return function (args){
            clearTimeout(timer);
            timer = setTimeout(function(){
                func(args)
            },delay)
        }
    }
    let ipt = document.getElementById('ipt');
    function a(){
        console.log('1111')
    }
    let myDebounce = debounce(a,1000)
    ipt.addEventListener('keyup',function(){
        myDebounce();
    })
    </script>

节流：当持续触发该事件，保证一定时间内，只执行该事件函数一次

   function throttle(func,delay){
        let timer;
        return function(args){
            if(!timer){
                timer = setTimeout(function(){
                    timer = null;
                    func(args)
                },delay)
            }
        }
    }

一个小案例的运用

<button>按钮</button>
<script>
 function throttle(func,delay){
        let timer;
        return function(args){
            if(!timer){
                timer = setTimeout(function(){
                    timer = null;
                    func(args)
                },delay)
            }
        }
    }
    let myThrottle = throttle(b,1000)
    function b(){
        console.log('你好哇，李银河')
    }
    document.getElementById('btn').onclick = function(){
        myThrottle();
    }
   </script>