前言之前我们写过基础版防抖节流能满足项目基础优化。但企业面试、高阶项目不会止步于基础版面试官真正要你手写的是支持立即执行、支持手动取消、兼容this、兼容事件参数、防抖收尾完整闭环的进阶完整版。很多新人只会写基础版一遇到“立即执行、取消防抖”直接挂科。本篇带你手撕面试满分级别的防抖、节流终极源码可直接用于生产环境、可写进简历项目亮点、面试直接默写通关。一、进阶防抖debounce完整源码需求分析面试满分标准支持立即执行首次触发立刻执行后续延迟支持取消功能手动终止等待、清空定时器保留this 指向、事件参数支持默认延迟时间支持收尾执行逻辑闭环终极完整源码可直接生产使用/** * 高阶防抖函数面试满分版 * param {Function} fn 回调函数 * param {Number} delay 延迟时间 * param {Boolean} immediate 是否立即执行 * returns {Function} 防抖包装函数带cancel取消方法 */ function debounce(fn, delay 500, immediate false) { let timer null; // 生成包装函数 const debounceFn function (...args) { // 保存this和参数解决事件回调丢失问题 const context this; // 每次触发清空旧定时器 if (timer) clearTimeout(timer); // 判断是否立即执行 if (immediate !timer) { fn.apply(context, args); } // 延迟执行收尾 timer setTimeout(() { // 非立即执行模式最后一次触发后执行 if (!immediate) { fn.apply(context, args); } timer null; }, delay); } // 手动取消防抖 debounceFn.cancel function () { clearTimeout(timer); timer null; } return debounceFn; }二、进阶防抖使用场景与实战演示1. 搜索框防抖普通延迟执行const search debounce((val) { console.log(搜索关键词, val); }, 500)2. 按钮防重提交立即执行禁止重复触发const submit debounce(() { console.log(提交表单); }, 1000, true)特点第一次点击立即执行1秒内重复点击无效完美解决按钮频繁提交BUG。3. 手动取消防抖// 终止本次等待的防抖任务 search.cancel();三、进阶节流throttle时间戳定时器双锁完整版基础节流要么开头执行要么结尾执行会导致页面滚动收尾少一次触发。企业标准高阶节流时间戳 定时器 双重方案首尾都会触发体验丝滑无遗漏。满分节流完整源码/** * 高阶节流函数首尾双触发、无卡顿、无遗漏 * param {Function} fn 回调 * param {Number} interval 间隔时间 * returns {Function} */ function throttle(fn, interval 200) { let lastTime 0; let timer null; const throttleFn function (...args) { const context this; const now Date.now(); // 时间戳方案开头立即执行 if (now - lastTime interval) { lastTime now; fn.apply(context, args); } else { // 定时器方案收尾补一次执行 if (!timer) { timer setTimeout(() { lastTime Date.now(); timer null; fn.apply(context, args); }, interval); } } } // 节流取消 throttleFn.cancel function () { clearTimeout(timer); timer null; } return throttleFn; }四、双锁节流核心优势滚动开始立刻触发不卡顿滚动停止后自动补最后一次触发数据不遗漏解决传统节流“停滚动不更新”的BUG自带取消方法适配组件销毁、页面卸载五、项目落地优化简历亮点升级将本篇高阶防抖节流替换博客旧版工具函数优化点支持按钮防重、滚动收尾更新、可手动取消任务、杜绝内存泄漏项目稳定性直接对标生产级代码。六、本篇结语写到这里你不再只会“调用防抖节流”而是能独立手写工业级源码。这道题是初级前端必问、中级前端必考的手撕题能写出带立即执行、取消功能、双锁节流的完整版已经吊打绝大部分零基础求职者。
