js的防抖与节流

<button id="debounce">点我防抖！</button>

    <script>
            // 1、获取这个按钮，并绑定事件
            var myDebounce = document.getElementById("debounce");
            myDebounce.addEventListener("click", debounce(sayDebounce));

        // 2、防抖功能函数，接受传参
        function debounce(fn) {
            // 4、创建一个标记用来存放定时器的返回值
            let timeout = null;
            return function () {
                // 5、每次当用户点击/输入的时候，把前一个定时器清除
                clearTimeout(timeout);
                // 6、然后创建一个新的 setTimeout，
                // 这样就能保证点击按钮后的 interval 间隔内
                // 如果用户还点击了的话，就不会执行 fn 函数
                timeout = setTimeout(() => {
                    fn.call(this, arguments);
                }, 1000);
            };
        }

        // 3、需要进行防抖的事件处理
        function sayDebounce() {
            // ... 有些需要防抖的工作，在这里执行
            console.log("防抖成功！");
        }
    </script>

 

防抖是利用闭包保存一个变量来存储定时器，每次点击的时候，清除定时器后重新启动定时器，定时器里过一段时间执行某项操作：可用于输入框搜索关键字的时候防抖匹配，以不至于每次变化都会触发事件；

<button id="throttle">点我节流！</button>

    <script>
            // 1、获取按钮，绑定点击事件
            var myThrottle = document.getElementById("throttle");
            myThrottle.addEventListener("click", throttle(sayThrottle));

        // 2、节流函数体
        function throttle(fn) {
            // 4、通过闭包保存一个标记
            let canRun = true;
            return function () {
                // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
                if (!canRun) {
                    return;
                }
                // 6、将 canRun 设置为 false，防止执行之前再被执行
                canRun = false;
                // 7、定时器
                setTimeout(() => {
                    fn.call(this, arguments);
                    // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
                    canRun = true;
                }, 1000);
            };
        }

        // 3、需要节流的事件
        function sayThrottle() {
            console.log("节流成功！");
        }
    </script>

节流是用户点击立即触发事件，但是用闭包存储了一个开关，如果事件在执行，就return false出去，事件执行完毕就把开关打开，再点击就可以执行事件，这样可以有效的阻止多次猛烈触发事件的问题