防抖和节流

触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

#示例代码:

// 防抖函数
function debounce(fn, wait) {
    let timer;
    return function () {
        let _this = this;
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
        }, wait);
        // 1使用
        window.onresize = debounce(function () {
            console.log("resize");
        }, 500);
    }
}

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

节流(throttle)

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

#示例代码

// 方式1：使用时间戳
        function throttlel(fn, wait) {
            let time = 0;
            return function () {
                let _this = 0;
                let args = arguments;
                let now = Date.now();
                if (now - time > wait) {
                    fn.apply(_this, args);
                    time = now;
                }
            }
        }
        // 方式2：使用定时器
        function thorttle2(fn, wait) {
            let timer;
            return function () {
                let _this = 0;
                let args = arguments;
                if (!timer) {
                    timer = setTimeout(function () {
                        timer = null;
                        fn.apply(_this, args);
                    }, wait);
                }
            }
        }

节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。