JS函数防抖和函数节流

[akeymo]

// 函数防抖
// 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时
function debounce(fn, wait) {
    let timer = null;
    return function (...args) {
        const context = this;
        // 如果存在timer，说明在n秒内又被触发了，则清空重新计时
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }

        timer = setTimeout(() => {
            fn.apply(context, args);
        }, wait);
    }
}

// 函数节流（定时器方式）
// 在单位时间内，无论多少次触发事件，都只执行一次回调函数
function throttleBySetTimeout(fn, wait) {
    let timer = null;
    return function (...args) {
        const context = this;
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                return result = fn.apply(context, args);
            }, wait);
        }
    }
}

// 函数节流（时间戳）
function throttleByGapTime(fn, wait) {
    let prevTime = 0;

    return function (...args) {
        const context = this;
        const nowTime = +new Date();
        if (nowTime - prevTime > wait) {
            prevTime = nowTime;
            return result = fn.apply(context, args);
        }
    }
}