柯里化本身不直接实现防抖,而是配合 debounce 函数预设 wait 和 options 参数,生成可复用的防抖工厂函数;真正起防抖作用的是 debounce,它通过闭包保存 timer 和配置,支持 leading/trailing、cancel/flush 等功能。

柯里化本身不直接实现防抖,但它能配合防抖函数,实现参数的分步预设和复用。真正起防抖作用的是 debounce 函数,柯里化只是帮你“定制好一部分参数”,后续调用更灵活。
先写一个标准的防抖函数
防抖核心是延迟执行、清除前序定时器。通用版本应支持手动取消、立即执行(leading)、延迟执行(trailing)等常见配置:
注意:防抖函数返回的是一个新函数,它会闭包保存 timer、配置项和原始函数。
- 接收目标函数
fn、延迟时间wait、配置对象options = { leading: false, trailing: true, maxWait } - 返回的函数每次调用都重置定时器;若
leading为 true,首次触发立即执行(且不再重复) - 支持
cancel()和flush()方法,便于控制生命周期
用柯里化预设防抖配置
柯里化让你可以提前固定 wait 和 options,生成一个“已配置好”的防抖工厂函数。比如:
-
const debounceFast = curryDebounce(100);→ 固定延迟 100ms -
const debounceSearch = debounceFast({ leading: false, trailing: true });→ 再固定行为策略 -
const searchHandler = debounceSearch(fetchApi);→ 最终绑定业务函数
这样做的好处是:不同场景复用同一套防抖策略,避免重复传参,也利于单元测试和策略集中管理。
柯里化防抖函数的实现方式
推荐用“多参数柯里化”而非嵌套函数链,更贴近实际使用习惯:
function curryDebounce(wait, options = {}) {
return function(fn) {
return debounce(fn, wait, options);
};
}
也可以支持更灵活的参数顺序(如先传 fn,再传 wait):
- 用
lodash.curry(debounce)直接柯里化原生防抖(需自行实现或引入 lodash) - 或手写支持占位符的柯里化(如
_),但日常项目中简单两层足够 - 关键不是“多深的柯里化”,而是让
wait和options可提前固化,降低调用侧认知负担
实际组合使用的例子
比如搜索框输入防抖 + 滚动节流,可分别定制:
const searchDebounced = curryDebounce(300, { trailing: true })(searchApi);const resizeDebounced = curryDebounce(150, { leading: true, trailing: false })(handleResize);- 事件监听时直接传入:
inputEl.addEventListener('input', searchDebounced);
所有防抖实例彼此隔离,timer 不共享,参数完全独立 —— 这正是柯里化带来的封装优势。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











