js节流与防抖

March 3, 2022

概念

节流和防抖都是用于限制函数在一小段时间内执行次数的机制。

以浏览器环境为例：DOM 事件的生成当然是无法控制的，而且可能频繁触发。如果一个事件处理函数高频触发，即使这个函数并不做太多工作，
并且如果是在主线程（UI 线程，而非 Workers 线程）执行任务，还是会有性能问题。

为防止 UI 卡顿，很容易想到通过 requestAnimationFrame 函数调度。
对于需要变更 DOM 的任务，这能够避免任务的不必要执行。缺点就是无法预测调度时间，比如如果是在后台标签页中就不会被调度。

后端（Node.js）往往是服务于多个用户的，而我们这里提到的节流和防抖是针对单个用户的（即浏览器）。
因此，节流和防抖只需要利用定时器并且在常量空间内存中记录状态即可。

下以 lodash 的接口为例，说明 debounce 和 throttle 函数。

Debounce

从逻辑的角度来看，debounce 将多个连续的（两两之间不超过指定时间间隔）任务分组。
对于每个任务组，仅实际执行其中的一个任务，并可指定执行的是第一个还是最后一个。

我们暂且忽略 lodash 的使用细节。从实现者的角度来看，我们实际上只需检测连续的两个任务之间的时间间隔，就可完成分组。
即，我们等待指定的时间间隔，若在时间间隔之内被调用，则属于已有的任务组；否则，属于新增的任务组，并重新循环此步骤。

debounce.example.js

// 避免在窗口大小变化时进行高耗时的计算
$(window).on("resize", _.debounce(calculateLayout, 150));

// 在点击时调用 `sendMail`，防抖后续的调用
$(element).on(
    "click",
    _.debounce(sendMail, 300, {
        leading: true,
        trailing: false,
    }),
);

// 确保 `batchLog` 在防抖调用1秒后被调用一次
const debounced = _.debounce(batchLog, 250, { maxWait: 1000 });
const source = new EventSource("/stream");
$(source).on("message", debounced);

// 取消尾部的防抖调用
$(window).on("popstate", debounced.cancel);

lodash 的 debounce 函数功能丰富，因此实现需要更多代码

lodash/src/debounce.ts

/**
 * 防抖函数，用于限制某个函数的执行频率。
 * @param {Function} func 需要防抖处理的函数。
 * @param {number} [wait=0] 延迟的毫秒数；如果未指定，则使用 `requestAnimationFrame`（如果可用）。
 * @param {Object} [options={}] 配置选项对象。
 * @param {boolean} [options.leading=false] 指定是否在延迟开始前调用函数。
 * @param {number} [options.maxWait] 函数允许延迟的最大时间。
 * @param {boolean} [options.trailing=true] 指定是否在延迟结束后调用函数。
 * @returns {Function} 返回新的防抖函数。
 */
function debounce(func, wait, options) {
    let lastArgs; // 上一次调用的参数
    let lastThis; // 上一次调用的this
    let maxWait; // 最大等待时间
    let result; // 函数执行结果
    let timerId; // 定时器ID
    let lastCallTime; // 上一次调用时间
    let lastInvokeTime = 0; // 上一次执行函数时间
    let leading = false; // 是否在延迟开始前调用
    let maxing = false; // 是否启用最大等待时间
    let trailing = true; // 是否在延迟结束后调用

    // 如果 `wait` 为0且 `requestAnimationFrame` 可用，则使用 `requestAnimationFrame` 。
    const useRAF = !wait && wait !== 0 && typeof requestAnimationFrame === "function";

    if (typeof func !== "function") throw new TypeError("Expected a function");

    wait = +wait || 0;
    if (isObject(options)) {
        leading = !!options.leading;
        maxing = "maxWait" in options;
        maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;
        trailing = "trailing" in options ? !!options.trailing : trailing;
    }

    // 执行函数并记录执行时间
    function invokeFunc(time) {
        const args = lastArgs;
        const thisArg = lastThis;

        lastArgs = lastThis = undefined;
        lastInvokeTime = time;
        result = func.apply(thisArg, args);
        return result;
    }

    // 启动定时器
    function startTimer(pendingFunc, milliseconds) {
        if (useRAF) {
            cancelAnimationFrame(timerId);
            return requestAnimationFrame(pendingFunc);
        }

        return setTimeout(pendingFunc, milliseconds);
    }

    // 取消定时器
    function cancelTimer(id) {
        if (useRAF) {
            cancelAnimationFrame(id);
            return;
        }
        clearTimeout(id);
    }

    // 处理前沿调用
    function leadingEdge(time) {
        lastInvokeTime = time;
        timerId = startTimer(timerExpired, wait);
        return leading ? invokeFunc(time) : result;
    }

    // 计算剩余等待时间
    function remainingWait(time) {
        const timeSinceLastCall = time - lastCallTime;
        const timeSinceLastInvoke = time - lastInvokeTime;
        const timeWaiting = wait - timeSinceLastCall;

        return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
    }

    // 判断是否应该调用函数
    function shouldInvoke(time) {
        const timeSinceLastCall = time - lastCallTime;
        const timeSinceLastInvoke = time - lastInvokeTime;

        return (
            lastCallTime === undefined ||
            timeSinceLastCall >= wait ||
            timeSinceLastCall < 0 ||
            (maxing && timeSinceLastInvoke >= maxWait)
        );
    }

    // 定时器到期后调用的函数
    function timerExpired() {
        const time = Date.now();
        if (shouldInvoke(time)) {
            return trailingEdge(time);
        }
        timerId = startTimer(timerExpired, remainingWait(time));
        return undefined;
    }

    // 处理后沿调用
    function trailingEdge(time) {
        timerId = undefined;

        if (trailing && lastArgs) {
            return invokeFunc(time);
        }
        lastArgs = lastThis = undefined;
        return result;
    }

    // 取消防抖
    function cancel() {
        if (timerId !== undefined) {
            cancelTimer(timerId);
        }
        lastInvokeTime = 0;
        lastArgs = lastCallTime = lastThis = timerId = undefined;
    }

    // 立即执行防抖函数
    function flush() {
        return timerId === undefined ? result : trailingEdge(Date.now());
    }

    // 检查防抖函数是否在等待调用
    function pending() {
        return timerId !== undefined;
    }

    // 防抖函数的主体
    function debounced(...args) {
        const time = Date.now();
        const isInvoking = shouldInvoke(time);

        lastArgs = args;
        lastThis = this;
        lastCallTime = time;

        if (isInvoking) {
            if (timerId === undefined) {
                return leadingEdge(lastCallTime);
            }
            if (maxing) {
                timerId = startTimer(timerExpired, wait);
                return invokeFunc(lastCallTime);
            }
        }
        if (timerId === undefined) {
            timerId = startTimer(timerExpired, wait);
        }
        return result;
    }

    // 添加取消、防抖、和挂起的方法
    debounced.cancel = cancel;
    debounced.flush = flush;
    debounced.pending = pending;

    return debounced;
}

Throttle

从逻辑的角度来看，一旦发生连续的任务，throttle 就将这段时间按时间间隔划分，每个时间间隔仅真正执行一个任务。

throttle.example.js

// 避免在滚动时过于频繁地更新位置
$(window).on("scroll", _.throttle(updatePosition, 100));

$(document).on("scroll", _.throttle(infiniteScrolling, 300));

function infiniteScrolling() {
    const pixelsFromWindowBottomToPageBottom = $(document).height() - $(window).scrollTop() - $(window).height();
    if (pixelsFromWindowBottomToPageBottom < 200) {
        $("body").append("<p>maybe new ajax content</p>");
    }
}

// 在点击事件触发时调用 renewToken，但每五分钟最多调用一次
const throttled = _.throttle(renewToken, 300000, { trailing: false });
$(element).on("click", throttled);

// 取消尾部的节流调用
$(window).on("popstate", throttled.cancel);

lodash 的 debounce 函数允许提供 maxWait 参数，这样 throttle 的实现就很简单了。
throttle 只不过是 wait 与 maxWait 相同的特化版 debounce

lodash/src/throttle.ts

/**
 * 节流函数，用于限制某个函数的执行频率。
 * @param {Function} func 需要节流处理的函数。
 * @param {number} [wait=0] 每次调用之间的最小间隔时间（毫秒）；如果未指定，则使用 `requestAnimationFrame`（如果可用）。
 * @param {Object} [options={}] 配置选项对象。
 * @param {boolean} [options.leading=true] 指定是否在延迟开始前调用函数。
 * @param {boolean} [options.trailing=true] 指定是否在延迟结束后调用函数。
 * @returns {Function} 返回新的节流函数。
 */
function throttle(func, wait, options) {
    let leading = true;
    let trailing = true;

    if (typeof func !== "function") throw new TypeError("Expected a function");

    if (isObject(options)) {
        leading = "leading" in options ? !!options.leading : leading;
        trailing = "trailing" in options ? !!options.trailing : trailing;
    }

    // 使用 debounce 实现节流功能
    return debounce(func, wait, {
        leading,
        trailing,
        maxWait: wait, // 将 maxWait 设置为 wait，实现节流效果
    });
}

其它

参考实现：

https://github.com/denoland/std/blob/main/async/debounce.ts

YieldRay

js节流与防抖

Preview: