前缘触发指事件首次触发时立即执行回调，后缘触发指事件停止后延迟执行；标准防抖默认仅后缘，通过immediate参数和定时器控制可支持前缘或两者共存。
在 JavaScript 防抖（debounce）函数中，前缘触发（leading edge）和后缘触发（trailing edge）是两种核心执行时机策略：前缘指事件**首次触发时立即执行**，后缘指事件**停止触发后延迟执行**。标准防抖默认只支持后缘，但通过增加一个标志位和一次性的立即调用逻辑，就能灵活支持前缘。
前缘触发（leading）如何实现
前缘触发的关键是在第一次调用时**立刻执行回调**，同时启动定时器用于后续节流。为避免重复触发，需用一个布尔标记（如 hasExecuted）或直接利用定时器 ID 是否为空来判断是否为首调。
- 首次调用时若未设定时器，则立即执行回调，并设置定时器（延迟重置状态）
- 定时器内将标记清空（或置为可再次前缘触发的状态），但通常前缘只允许“第一次”触发，所以常配合 immediate: true 参数做一次性控制
- 注意：前缘 + 后缘可同时启用，此时首次立即执行，最后一次停止后还会再执行一次（即“首尾都执行”）
后缘触发（trailing）是默认行为
后缘触发无需额外配置，是防抖最常见形式：每次触发都清除旧定时器，新建一个延迟任务；只有当触发完全停止、延迟时间过去后，回调才执行。
- 适用于搜索框输入后请求、窗口 resize 后重新布局等场景
- 实现上只需每次调用时 clearTimeout 旧 timer，再 setTimeout 新任务即可
- 若只启用后缘（immediate: false），则不会在首次触发时执行，仅响应“静默期结束”
一个支持双模式的防抖函数示例
下面是一个简洁、可读性强的实现，通过 immediate 参数控制前缘：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, wait, immediate = false) {
let timeout = null;
return function executedFunction() {
const later = () => {
timeout = null;
if (!immediate) func.apply(this, arguments);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(this, arguments);
};
}
- immediate: true → 首次调用立即执行，后续触发只刷新定时器；最后一次延迟结束后不再执行（除非再配 trailing）
- 若想实现“前缘 + 后缘”（即首尾都执行），需稍作扩展：在 later 中加判断，例如用 isFirstCall 和 isLastCall 标记，或改用节流+防抖组合逻辑
- 实际使用中建议封装成工厂函数，支持 cancel / flush 方法，便于测试和控制
使用时的常见注意事项
前缘与后缘不是互斥选项，而是可以组合使用的执行策略，但需明确业务语义：
- 按钮防重复点击适合前缘（立刻响应）+ 可选取消后缘（避免松手后又触发）
- 输入搜索推荐一般只用后缘，避免频繁无效请求
- 前缘触发时要注意 this 和 arguments 的绑定，箭头函数会丢失上下文，应使用 func.apply(this, arguments) 或 func.call(this, ...arguments)
- 务必在组件卸载或监听器移除前调用 cancel，防止内存泄漏或执行过期回调
