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

在前端开发中防抖Debounce与节流Throttle是性能优化的核心手段广泛应用于搜索输入、窗口 resize、滚动监听等场景。但90%的开发者仅能写出基础版本忽略边界场景处理导致线上出现误触发、性能损耗等问题也是大厂前端面试的高频考点热度常年居高不下。很多开发者借助AI生成防抖节流代码但往往存在逻辑漏洞比如防抖忽略leading/trailing触发控制节流无法处理连续触发的边界情况甚至出现定时器泄露问题。本文将拆解核心逻辑给出极简可落地的实现方案同时规避常见踩坑点。难题核心需求实现一个支持leading首次触发立即执行、trailing延迟触发、取消功能的防抖函数以及一个兼容双向触发的节流函数要求代码简洁、无冗余适配生产环境。极简代码实现JavaScript关键避坑点解析1. 防抖必须清除旧定时器否则会出现多次延迟触发2. leading和trailing不可同时为false否则函数无法触发3. 节流结合时间戳和定时器既保证固定间隔执行又避免最后一次触发漏执行4. 增加取消方法适配组件卸载、手动终止等场景避免内存泄露。实际应用场景搜索框输入防抖延迟300ms触发接口请求、窗口resize节流每500ms执行一次布局调整代码可直接复制使用兼顾性能与实用性也是面试中加分项。