函数防抖与函数节流

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

当然，需要判断在触发事件时，是否需要立刻执行回调函数。

/**
 * @param fn 回调函数
 * @param delay 延迟执行毫秒数
 * @param immediate true 指立即执行回调，false 指非立即执行回调
 */
function debounce(fn, delay, immediate) {
    let timer = null;

    return function () {
        let context = this;
        let args = arguments;

        // 如果此时存在定时器，则取消之前并重新计时
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        
        if (immediate) {
            let _timer = !timer;
            timer = setTimeout(function() {
                timer = null;
            }, delay);
            
            if (_timer) fn.apply(context, args);
        }
        else {
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        }
    }
}

// 调用防抖函数
// foo 回调函数
document.getElementById('xxx').onclick = debounce(foo, 500, true);

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll、resize、mousemove等函数的事件监听上，通过事件节流来降低事件调用的频率。

同样，函数节流需要判断触发事件时，是否需要立刻执行回调函数。

/**
 * @param fn 回调函数
 * @param delay 延迟执行毫秒数
 * @param immediate true 指立即执行回调，false 指非立即执行回调
 */

function throttle(fn, delay, immediate) {
    let preTime = 0;
    let timer = null;

    return function () {
        let context = this;
        let args = arguments;
        let nowTime = Date.now();

        if (immediate) {
            if (nowTime - preTime >= delay) {
                preTime = nowTime;
                fn.apply(context, args);
            }
        } else {
            if(!timer) {
                timer = setTimeout(function() {
                    timer = null;
                    fn.apply(context, args);
                }, delay);
            }
        }
    };
}

// 调用节流函数
// foo 回调函数
document.getElementById('xxx').onmousemove = debounce(foo, 500, true);