JavaScript中函数防抖和函数节流

函数防抖

概念

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

比喻理解

如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）

解决方案

 <script>
        function debounce(fn, wait) {
            var timer = null;
            return function () {
                var context = this
                var args = arguments
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                timer = setTimeout(function () {
                    fn.apply(context, args)
                }, wait)
            }
        }
        var fn = function () {
            console.log('boom')
        }
        //第一次在1500ms后触发，之后每1000ms触发一次
        setInterval(debounce(fn, 500), 1000)
        // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）
        setInterval(debounce(fn, 2000), 1000)
    </script>

函数节流

概念

当持续触发事件时，保证一定时间段内只调用一次事件处理函数

比喻理解

节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴

解决方案

<script>
        function throttle(fn, gapTime) {
            let _lastTime = null;
            return function () {
                let _nowTime = +new Date()
                if (_nowTime - _lastTime > gapTime || !_lastTime) {
                    fn();
                    _lastTime = _nowTime
                }
            }
        }
        let fn = () => {
            console.log('boom')
        }
        setInterval(throttle(fn, 1000), 10)
        //结果一秒一次
    </script>