前端高频难题——防抖与节流的精准实现（避坑版）

在前端开发中，防抖（Debounce）与节流（Throttle）是性能优化的核心手段，广泛应用于搜索输入、窗口 resize、滚动监听等场景。但90%的开发者仅能写出基础版本，忽略边界场景处理，导致线上出现误触发、性能损耗等问题，也是大厂前端面试的高频考点，热度常年居高不下。

很多开发者借助AI生成防抖节流代码，但往往存在逻辑漏洞：比如防抖忽略leading/trailing触发控制，节流无法处理连续触发的边界情况，甚至出现定时器泄露问题。本文将拆解核心逻辑，给出极简可落地的实现方案，同时规避常见踩坑点。

难题核心需求：实现一个支持leading（首次触发立即执行）、trailing（延迟触发）、取消功能的防抖函数，以及一个兼容双向触发的节流函数，要求代码简洁、无冗余，适配生产环境。

极简代码实现（JavaScript）：

关键避坑点解析：1. 防抖必须清除旧定时器，否则会出现多次延迟触发；2. leading和trailing不可同时为false，否则函数无法触发；3. 节流结合时间戳和定时器，既保证固定间隔执行，又避免最后一次触发漏执行；4. 增加取消方法，适配组件卸载、手动终止等场景，避免内存泄露。

实际应用场景：搜索框输入防抖（延迟300ms触发接口请求）、窗口resize节流（每500ms执行一次布局调整），代码可直接复制使用，兼顾性能与实用性，也是面试中加分项。