防抖节流理解

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

就敲了一个小例子

首先是防抖

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

点击

 防抖

节流

      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))

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