前言
之前我们写过基础版防抖节流，能满足项目基础优化。
但 企业面试、高阶项目 不会止步于基础版：
面试官真正要你手写的是：支持立即执行、支持手动取消、兼容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
-
自带取消方法，适配组件销毁、页面卸载
五、项目落地优化（简历亮点升级）
将本篇高阶防抖节流替换博客旧版工具函数：
优化点：支持按钮防重、滚动收尾更新、可手动取消任务、杜绝内存泄漏，项目稳定性直接对标生产级代码。
六、本篇结语
写到这里，你不再只会"调用防抖节流"，而是能 独立手写工业级源码。
这道题是 初级前端必问、中级前端必考 的手撕题，能写出带立即执行、取消功能、双锁节流的完整版，已经吊打绝大部分零基础求职者。