JS 的节流与防抖

前言

节流与防抖主要是为了解决我们实际开发场景中对于一些高频触发的事件，响应跟不上触发而导致的一系列问题。

名词解释

1、防抖——debounce

顾名思义，防抖就是防止多点几下触发多次事件。

用一句话总结的话就是单位时间内，事件只触发一次

具体实现可根据实际情况分为前缘防抖及延迟防抖

前缘防抖
当事件被触发时，先执行事件，然后时间周期内不执行动作且时间周期更新

    /**
     * 前缘防抖工厂（delay时间内，只执行一次）当事件快速连续不断触发时，动作只会执行一次
     * @param {Function} func 需要防抖处理的方法
     * @param {number} [delay=800] 毫秒
     * @returns {Function}
     */
    let debounce = (func, delay) => {
        return (...args) => {
            if (func.debounceTimer) {
                clearTimeout(func.debounceTimer);
            } else {
                func.apply(this, args);
            }
            func.debounceTimer = setTimeout(() => {
                func.debounceTimer = null
            }, delay || 800);
        }
    }

延迟防抖
当事件被触发时，时间周期内延迟动作，若期间再次触发事件，则重新更新时间，直到周期结束，执行事件。

    /**
     * 延迟防抖工厂（delay时间内，只执行一次）当事件快速连续不断触发时，动作只会执行一次
     * @param {Function} func 需要防抖处理的方法
     * @param {number} [delay=800] 毫秒
     * @returns {Function}
     */
    let debounce = (func, delay) => {
        return (...args) => {
            if (func.debounceTimer) {
                clearTimeout(func.debounceTimer);
            }
            func.debounceTimer = setTimeout(() => {
                func.apply(this, args);
            }, delay || 800);
        }
    }

2、节流—— throttle

所谓节流，就是指连续触发事件但是在单位时间内只执行一次函数

如果说防抖是怕多次触发事件，而节流的用处就是定时触发，降低流速

具体实现可根据实际情况分为前缘节流及延迟节流

前缘节流
当事件被连续触发时，立即响应事件，并在单位时间周期内不响应事件

    /**
     * 前缘节流工厂（delay时间内，只执行一次动作，若有新事件触发，不执行。）
     * @param {Function} func 需要节流的方法
     * @param {number} [delay=800] 毫秒
     * @returns {Function}
     */
    let throttle = (func, delay) => {
        return (...args) => {
            if (!func.throttleLastTime) {
                func.throttleLastTime = 0;   
            }
            delay = delay || 800;
            const now = +Date.now();
            if (now > func.throttleLastTime + delay) {
                func.throttleLastTime = now;
                func.apply(this, args);
            }
        }
    }

延迟节流
当事件被连续触发时，不立即响应事件，并在单位时间周期结束后响应事件

    /**
     * 延迟节流工厂（delay时间内，只执行一次动作，若有新事件触发，不执行。）
     * @param {Function} func 需要节流的方法
     * @param {number} [delay=800] 毫秒
     * @returns {Function}
     */
   let throttle = (func, delay) => {
        return (...args) => {
            if (!func.throttleLastTime) {
                func.throttleLastTime = setTimeout(() => {
                    func.throttleLastTime = null;
                    func.apply(this, args);
                }, delay || 800);
            }
        }
    }