防抖节流理解

性能优化是前端老生常谈的问题，今天看了下防抖节流这块的东西，觉得挺有意思的

就敲了一个小例子

首先是防抖

个人理解防抖是有一个延时执行 也就是说我现在点击一个事件我有可能让他延迟0.3s触发，如果在者0.3s内又触发了，就不让它触发， 就重新计算周期到规定的时间再触发

<button id='btn'>点击</button>

 防抖

 <script>
   var btn= document.getElementById('btn')
        function debounce(fn, delay) {
            let timer = null; //一开始函数的执行状态
            return function () {
                // 清理掉正在执行的函数，并重新执行
                clearTimeout(timer); // 如果不清的话连续点击过后在延迟这个时间都一起执行了 因为时间够了 应该不累加，只要它点了我就重新计算然后执行
                timer = setTimeout(function () {
                    fn(); 
                }, delay);
            }
        }
        let num = 0; // 记录当前函数调用次数
        // 当点击按钮时执行的函数 
        function foo() {
            num++;
            console.log('调用了'+num+'次');
        }
        btn.addEventListener('click',debounce(foo,2000))
        
    </script>

节流

      function throttle(fn) {
            let flag = true; // 保存一个状态 一开始为true
            return function () {
                // 在函数开头判断标记是否为true，不为true则return 
                if (!flag) return;
                // 立即设置为false
                 flag = false;
                // 将外部传入的函数的执行放在setTimeout中
                setTimeout(() => {
                    // 当定时器没有执行的时候标记永远是false，在开头被return掉
                    fn();
                    // 最后变成true表示函数执行过了 可以开始重新循环了
                    flag = true;
                }, 1000);
            };
        }
        function sayHi() {
            console.log('我被点击了');
        }
        btn.addEventListener('click', throttle(sayHi))

节流就是一定时间内触发几次 三秒内触发一次 在三秒内连续触发 只执行一次