JS防抖函数与节流函数

防抖函数：

当持续触发事件，在一定时间内没有再触发事件，事件处理函数才会执行一次

    <input type="text" id="input">

    <script>
    
        var input = document.getElementById('input')

        // 防抖函数的核心     setTimeout  闭包
        function debounce(callback, delay){
            let timer
            return function(value){
                // 每次执行先清除一下定时器
                // 重新生成新的定时器
                // 当定时器执行期间没有被清除则执行回调方法
                clearTimeout(timer)
                timer = setTimeout(function(){
                    callback && callback(value)
                }, delay)
            }
        }

        // 防抖回调 处理相关逻辑
        function callbackFn(value){
            console.log(value)
        }

        // 让return 出来的函数执行
        var debounceFunc = debounce(callbackFn,1000);

        // 监控input输入框的相关逻辑
        input.addEventListener('keyup', function(e){
            debounceFunc(e.target.value)
        })
        
    </script>

节流函数

当持续触发事件的时候  保证一段时间内  只调用一次事件执行

    <button id="button">点击</button>

    <script>

        //  setTimeout  闭包
        function throttle(callback, delay){
            let timer
            return function(){
                // timer有值时，不需要做任何处理
                if(!timer){
                    // timer为null，需要重新设置timer定时器，定时器结束时并将timer设置为null
                    // 并执行回调函数
                    timer = setTimeout(function(){
                        timer = null
                        callback && callback()
                    }, delay)
                }
            }
        }

        // 防抖回调 处理相关逻辑
        function callbackFn(){
            console.log(new Date().toString())
        }

        // 监控input输入框的相关逻辑
        document.getElementById('button').onclick = throttle(callbackFn, 2000)
        
    </script>