要实现防抖节流池，核心思路是维护一个以函数标识为键的 map 对象，将多个函数的执行状态（定时器、上次执行时间等）集中管理。通过定义一个工厂函数或类，接收配置参数并返回带有唯一 id 的包装函数，从而支持对同一函数实例进行独立的防抖或节流控制，同时提供批量清理和状态查询的能力。
如何设计防抖节流池的核心数据结构
防抖节流池的基础是一个存储所有激活任务状态的容器。通常使用 JavaScript 的 Map 对象来存储，Key 为任务的唯一标识符（ID），Value 为一个包含定时器引用、上次执行时间戳、当前策略类型以及原始函数引用的对象结构。这种设计允许池管理器快速定位特定任务的上下文，而不需要为每个函数创建独立的闭包作用域，从而实现资源的统一调度。
class DebounceThrottlePool {
constructor() {
// 核心存储：key 为 taskId, value 为任务上下文
this.pool = new Map();
this.nextId = 1;
}
// 生成唯一 ID
_generateId() {
return `task_${this.nextId++}`;
}
// 注册新任务
register(fn, options) {
const id = this._generateId();
const context = {
fn,
options: { ...options },
timer: null,
lastExecTime: 0,
strategy: options.strategy || 'debounce'
};
this.pool.set(id, context);
return id;
}
// 获取任务上下文
getContext(id) {
return this.pool.get(id);
}
// 清理指定任务
clear(id) {
const ctx = this.pool.get(id);
if (ctx) {
if (ctx.timer) clearTimeout(ctx.timer);
this.pool.delete(id);
}
}
// 清空整个池
flush() {
this.pool.forEach((ctx) => {
if (ctx.timer) clearTimeout(ctx.timer);
});
this.pool.clear();
}
}
如何在池中集成具体的防抖与节流逻辑
在拥有基础数据结构后，需要在池内部实现具体的执行拦截逻辑。当用户调用包装后的函数时，实际触发的是池中的代理方法。该方法首先查找对应的任务上下文，然后根据配置的 strategy 属性（'debounce' 或 'throttle'）执行不同的计时器逻辑。防抖模式会在每次调用时重置定时器，直到最后一次调用后等待指定时间才执行；节流模式则记录上次执行时间，若当前时间与上次执行时间间隔小于阈值则忽略本次调用。
// 在 DebounceThrottlePool 类中扩展的方法
createWrapper(id) {
const ctx = this.pool.get(id);
if (!ctx) throw new Error('Task not found');
return (...args) => {
const now = Date.now();
if (ctx.strategy === 'debounce') {
// 防抖逻辑：清除旧定时器，设置新定时器
if (ctx.timer) clearTimeout(ctx.timer);
ctx.timer = setTimeout(() => {
ctx.fn.apply(null, args);
ctx.timer = null;
}, ctx.options.wait);
} else if (ctx.strategy === 'throttle') {
// 节流逻辑：判断是否超过间隔时间
if (now - ctx.lastExecTime >= ctx.options.wait) {
ctx.lastExecTime = now;
ctx.fn.apply(null, args);
}
}
};
}
// 使用示例
/*
const pool = new DebounceThrottlePool();
const myFunc = () => console.log('executed');
const taskId = pool.register(myFunc, { wait: 500, strategy: 'debounce' });
const wrappedFn = pool.createWrapper(taskId);
wrappedFn(); // 触发防抖
pool.clear(taskId); // 取消执行
*/
如何处理同一函数多次注册的冲突与复用
在实际应用中，同一个原始函数可能会被多次注册到池中，或者希望复用已有的任务配置。如果直接再次调用 register，会生成新的 ID 导致之前的定时器失效或产生冗余。为了支持复用，可以在 register 方法中增加检查逻辑，如果传入的函数对象已存在于池中，则返回其现有的 ID 而不是创建新任务。此外，还可以提供 updateOptions 方法，允许动态修改正在运行中的任务的配置参数，例如调整防抖的等待时间，而无需销毁重建任务。
// 增强版 register，支持复用
register(fn, options) {
// 检查是否已存在相同函数的任务
for (let [id, ctx] of this.pool.entries()) {
if (ctx.fn === fn && !ctx.timer) {
// 如果任务已完成且空闲，可考虑复用或更新配置
// 这里简单处理：若存在则返回现有ID，实际业务可能需要更复杂的锁定机制
return id;
}
}
return this._generateNewRegister(fn, options);
}
updateOptions(id, newOptions) {
const ctx = this.pool.get(id);
if (ctx) {
Object.assign(ctx.options, newOptions);
}
}
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
