js函数防抖和节流

函数防抖（debounce）

• 防抖是为了解决频繁触发某个事件的情况造成的性能消耗。
• 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。

    /**
     * @param func  目标函数
     * @param wait  延迟执行毫秒数
     * @param immediate true -立即执行，false -延迟执行
     * @returns {(function(): void)|*}
     */
    function debounce(func, wait, immediate) {
        let timer;
        return function () {
            let context = this, args = arguments;
            if (timer) clearTimeout(timer);
            if (immediate) {
                let callNow = !timer;
                timer = setTimeout(() => {
                    timer = null;
                }, wait);
                if (callNow) func.apply(context, args);
            } else {
                timer = setTimeout(() => {
                    func.apply(context, args);
                }, wait)
            }
        }
    }

 

函数节流（throttle）

• 只允许一个函数在xxx毫秒执行一次希望触发的事件handler
• mustRun属性，代表mustRun毫秒内，必定会触发一次handler。

    /**
     * @param func  目标函数
     * @param wait  延迟时间
     * @param mustRun   必定触发一次事件-limited
     * @returns {(function(): void)|*}
     */
    function throttle(func, wait, mustRun) {
        let timer, startTime = new Date();
        return function () {
            const context = this, args = arguments, curTime = new Date();
            clearTimeout(timer);
            if (curTime - startTime >= mustRun) {
                func.apply(context, args);
                startTime = curTime;
            } else {
                timer = setTimeout(func, wait);
            }
        }
    }

　　假设wait=500，mustRun=1000，则表示在一段时间内事件触发的间隔一直短于500ms，那么保证在1000ms内handler至少执行一次。