闭包是实现防抖和节流的核心机制——它使内部函数能持续访问外部作用域的变量（如timer、时间戳），从而精准控制执行频率；每个调用生成独立闭包，确保状态隔离、互不干扰。
闭包是实现防抖（debounce）和节流（throttle）的核心机制——它让内部函数能持续访问并操作外部函数作用域中的变量（比如定时器 ID、上一次执行时间等），从而控制函数的执行频率。
用闭包实现防抖（Debounce）
防抖的逻辑是：在事件被频繁触发时，只执行最后一次触发后的回调，中间的触发全部被“忽略”。关键靠闭包保存 上一个定时器的引用，每次新触发时先清除旧定时器，再设新定时器。
示例代码：
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 使用
const search = debounce((query) => {
console.log('请求搜索:', query);
}, 300);
input.addEventListener('input', (e) => search(e.target.value));
- 闭包保留了
timer变量，确保每次调用返回的函数都能读写同一个定时器句柄 - 每次输入都重置倒计时，只有停顿超过
delay后才真正执行 - 注意：若需立即执行首次调用（leading edge），可扩展为带
immediate参数的版本
用闭包实现节流（Throttle）
节流是固定时间间隔内最多执行一次，适合处理 scroll、resize 等高频事件。常用“定时器 + 时间戳”双策略，闭包用来维持 上次执行时间 或 等待中的定时器状态。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
定时器版（推荐，更稳定）：
function throttle(fn, delay) {
let timer = null;
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
}
};
}
- 闭包维护
timer标志位：为 null 表示可执行，否则排队等待 - 执行完回调后清空
timer，释放下一次执行权限 - 相比时间戳版，该方式不会因事件突发导致连续执行，更符合“匀速”预期
闭包在这里的关键作用
防抖和节流本质上都是「状态记忆型」高阶函数——它们需要记住上次的状态（是否在等待、上一次执行时间、当前定时器 ID）。JavaScript 中只有闭包能自然地把局部变量与返回的函数绑定在一起，不依赖全局变量或 this 绑定，保证多个实例互不干扰。
- 每个
debounce(...)调用都生成独立闭包，timer彼此隔离 - 没有闭包，就只能靠全局变量或 DOM dataset 存状态，易冲突、难维护
- 箭头函数不可替代：必须用普通函数才能正确绑定
this和接收args
小提醒：实际使用注意点
- 记得在组件卸载或事件解绑前清除残留定时器（尤其防抖），避免内存泄漏
- 节流若需支持首次立即执行 + 尾部补发，可用双时间戳（prev + now）+ 定时器兜底组合实现
- Lodash 的
_.debounce和_.throttle内部正是基于闭包，并额外支持取消（cancel）、刷新（flush）等方法
