JavaScript 中的防抖与节流

作者：只与明月听
链接：https://juejin.cn/post/7030787304696315918
来源：稀土掘金

防抖节流是开发中用的比较多的两个工具函数了，可以避免函数在短时间内大量调用。一般情况下我们可以直接使用 lodash 的防抖节流函数，下面是两种防抖节流的 JavaScript 实现。

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(func, wait) {
    var timeout;

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

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

节流

规定在一个单位时间内，只能触发一次函数。如果这个函数单位时间内触发多次函数，只有一次生效。

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}