JavaScript防抖函数如何动态传参，无需重复创建防抖绑定实例

原有写法失效的核心原因 #

现有jQuery风格的防抖实现是闭包固化参数的工厂模式：当你执行$.debounce(func, wait, immediate)时，传入的目标函数、等待时长、立即执行配置就会被永久绑定在返回的闭包环境里，连带着该实例的timeout定时器状态也被独立隔离。
你尝试的var function_debounce = $.debounce(func, wait); function_debounce(print_something, 100)写法不生效，本质是把print_something、100这两个值当成了普通参数，透传给了当初被固化在闭包里的初始func，根本不会修改防抖的配置逻辑，自然达不到预期效果。

动态防抖的实现思路 #

要实现不用提前绑定、调用时动态传配置的效果，需要对原有实现做三处核心调整：

• 不再为单次防抖调用单独创建闭包，而是用独立的状态存储结构，给每个作为防抖目标的函数维护独立的定时器状态，避免不同函数的防抖逻辑互相干扰
• 把“目标函数、等待时长、立即执行策略”这些配置，从生成防抖实例时传入，改为触发防抖调用时动态传入
• 自动把调用时附带的业务参数透传给最终执行的目标函数

改造后的完整代码 #

$.debounce = function() {
    // 用Map存储每个目标函数对应的独立定时器，隔离不同函数的防抖状态
    const timerPool = new Map();

    // 返回动态防抖的统一入口
    return function(targetFunc, wait = 300, immediate = false) {
        // 基础合法性校验
        if (typeof targetFunc !== 'function') {
            throw new Error('动态防抖调用必须传入合法的目标函数');
        }
        // 取出当前目标函数对应的历史定时器
        const prevTimer = timerPool.get(targetFunc);
        // 缓存当前执行上下文和入参，供定时器触发时使用
        const execContext = this;
        const execArgs = Array.from(arguments);
        // 提取真正要传给目标函数的业务参数（跳过前3个防抖配置参数）
        const bizArgs = execArgs.slice(3);

        // 清除该目标函数之前设置的定时器
        clearTimeout(prevTimer);

        const later = () => {
            // 定时器触发完成后，清除对应的状态存储
            timerPool.delete(targetFunc);
            if (!immediate) {
                targetFunc.apply(execContext, bizArgs);
            }
        }

        const needCallNow = immediate && !prevTimer;
        // 设置新的定时器，存入状态池
        const newTimer = setTimeout(later, wait);
        timerPool.set(targetFunc, newTimer);

        if (needCallNow) {
            targetFunc.apply(execContext, bizArgs);
        }
    }
}

使用方式 #

只需要在初始化时生成一次统一的动态防抖入口，后续所有防抖场景都可以复用这个入口，完全动态传参：

// 初始化一次全局动态防抖入口
const debounceCaller = $.debounce();

// 目标业务函数
function print_something(content) {
    console.log(content);
}

// 动态指定对print_something做100ms延迟的防抖，传入的业务参数会自动透传
debounceCaller(print_something, 100, false, '第一次触发');
debounceCaller(print_something, 100, false, '第二次触发'); // 100ms窗口内只会执行最后一次的内容

// 可以直接换其他目标函数做防抖，状态完全独立
function uploadFile(file) {
    console.log('上传文件：', file);
}
// 对uploadFile做500ms立即执行模式的防抖
debounceCaller(uploadFile, 500, true, 'test.pdf');

关键注意点 #

• 所有防抖状态按目标函数独立隔离，不会出现A函数的防抖触发打断B函数防抖计时的问题
• 不需要再为每个业务函数提前生成绑定的防抖实例，所有配置都在调用时动态指定，灵活度更高
• 保留了原生防抖的所有核心能力：延迟执行、立即执行模式、参数透传、上下文绑定

内容的提问来源于stack exchange，提问作者testtesttesteettesttesttes