JS-防抖和节流

防抖

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
在事件被触发几秒后再执行回调函数，如果在这几秒内又被触发，则重新计时。也就是可以理解为，本应该触发好多的事件，但是我们只允许它在规定时间内触发一次。把多次变为最后一次执行。

 window.onload = function () {
            // 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("防抖成功！");
        }

节流

节流：指定时间间隔内只会执行一次任务。
规定一个时间，在这个时间内，只能有一次触发事件的回调函数执行，如果在同一个时间内某事件被触发多次，只有一次能生效。把多次变成每隔一段时间来执行。

window.onload = function () {
            // 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("节流成功！");
        }

小结

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
防抖是维护一个计时器，在规定时间后触发函数，如果在规定时间内再次触发的话，都会清除当前的时间然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
我们就可以使用防抖与节流来减少不必要的损耗。
（若有不对，望指出）