JS系列—防抖和节流

节选自：浅谈JS防抖和节流

防抖(debounce)

对于短时间内连续触发的事件，在某个时间期限内，让事件处理函数只执行一次。

在第一次触发事件时，不立即执行函数，而是给出一个期限值，例如200ms

• 如果在200ms内没有再次触发事件，执行函数
• 如果在200ms内再次触发事件，取消当前的计时，重新开始计时

/**
 * 防抖包装器
 * @param fn [function] 需要防抖的函数
 * @param delay [number] 毫秒，防抖期限值
 * @returns 
 */
function debounce(fn, delay) {
    let timer = null; // 闭包
    return function() {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
    }
}

节流(throttle)

让事件处理函数定期生效。即让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活。

/**
 * 节流包装器
 * @param fn [function] 需要节流的函数
 * @param delay [number] 毫秒，节流期限值
 * @returns 
 */
function throttle(fn, delay) {
    let valid = true; // 闭包
    return function() {
        if (!valid) {
            return false;
        }
        valid = false;
        setTimeout(() => {
            fn();
            valid = true;
        }, delay);
    }
}