js节流防抖

March 3, 2022

js 经典问题，实际使用还是上 lodash
lodash 实现中函数包装器返回的函数还提供 cancel 方法取消延迟调用和 flush 方法立即调用原函数

debounce

被包装的函数在给定时间内只会执行一次，若包装后的函数在给定时间内重复调用，则重新计算时间

非常适合搜索框，表单验证

即：给定回调 f 和等待时间 t，返回包装函数 wf。
调用 wf 时，等待时间 t 后再执行回调 f，若等待过程中 wf 再次被调用，
则取消之前的等待，重新等待时间 t

lodash 支持 leading 选项，允许第一次调用 wf 立即执行 f，跳过等待
lodash 返回的 wf 函数上还包含 cancel 和 flush 方法

lodash 定义：

function debounce(
    func: (...args: any) => any,
    wait: number = 0,
    options?: {
        leading?: boolean; // default false
        maxWait?: number;
        trailing?: boolean; // default true
    },
);

https://www.lodashjs.com/docs/lodash.debounce

最简单实现

function debounce(func, wait = 0) {
    let timer = null;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func(...args), wait);
    };
}

const debounced = debounce((world) => console.log("Hello, " + world), 1000);
setInterval(() => debounced("world!"), 900); // 什么都不会输出，因为每900ms触发一次，但debounced设置wait=1000ms

基础实现

function debounce(func, wait = 0, immediate) {
    let timeout, context, args;
    // 定时器id， 保存this， 保存调用实参
    const later = () =>
        setTimeout(() => {
            timeout = null; // 定时器真正运行后，允许下一次运行
            if (!immediate) {
                // （*）
                func.apply(context, args);
                context = args = null;
            }
        }, wait); // later()返回定时器id
    const bounced = (...params) => {
        if (!timeout) {
            timeout = later(); // 没有定时器，说明此次调用可以执行
            if (immediate) {
                func.apply(context, params); // immediate参数设置为直接执行，调用后直接执行一次
            } else {
                context = this;
                args = params;
                // immediate参数设置为延迟后再执行，保存this和参数，待（*）处再实际执行
            }
        } else {
            // 有定时器，说明上一次调用还未被执行，重新计算定时器时间
            clearTimeout(timeout);
            timeout = null;
        }
    };
    bounced.cancel = () => {
        clearTimeout(timeout);
        timeout = null;
    };
    return bounced;
}

throttle

包装后函数在给定时间内只会执行一次，若在给定时间内多次调用，则实际只触发一次调用

lodash 的 leading 选项指定触发的是给定时间内的第一次调用（默认值），
trailing 选项指定触发的是给定时间内的最后一次调用

lodash 定义：

function throttle(
    func: (...args: any) => any,
    wait: number = 0,
    options?: {
        leading?: boolean, // default true
        trailing?: boolean, // default true
    }
);

https://www.lodashjs.com/docs/lodash.throttle
在 lodash 中，throttle 是通过包装 debounce 实现的，可以看到 debounce 的 options 多了一个 maxWait 选项。
实现该参数需要判断时间，上文实现并没有实现该参数。 maxWait 即最多延迟时间
lodash 中 throttle 通过将 debounce 的 options.maxWait 选项设置为 wait 即实现了 throttle

最简单实现

function throttle(func, wait = 0) {
    let canNext = true;
    return function (...args) {
        if (!canNext) return;
        canNext = false;
        setTimeout(() => {
            func(...args);
            canNext = true;
        }, wait);
    };
}

const throttled = throttle((world) => console.log("Hello, " + world), 1000);
setInterval(() => throttled("world!"), 500); // 实际每1000ms触发一次

摘抄的实现

function throttle(func, wait = 0, options = {}) {
    let timeout, context, args, result;
    let previous = 0;
    const later = () => {
        previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    const throttled = function () {
        const now = Date.now() || new Date().getTime();
        const remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
    throttled.cancel = () => {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };
    return throttled;
}

←Back to home