防抖（Debounce）和节流（Throttle）是前端高频优化手段，核心目的是限制高频触发的函数执行次数，减少浏览器重排重绘、网络请求、计算渲染的性能消耗。二者核心差异：防抖是「触发后延迟执行，多次触发重置计时，只执行最后一次」；节流是「固定时间间隔，只执行一次，匀速限流」。
本文聚焦实际业务使用场景、低版本浏览器兼容方案、函数取消终止方法三大核心实战要点，适配日常开发90%以上业务场景。
一、防抖（Debounce）实战指南
1. 核心原理
事件高频触发时，每次触发都会清空上一次的延迟定时器，只有当触发停止后，等待指定时长无新触发，才会执行一次目标函数。简单概括：频繁触发不生效，停一下才执行。
2. 核心业务使用场景
所有需要等待用户操作结束后，再执行一次逻辑的场景，优先使用防抖。
搜索框联想查询（最常用）：用户输入关键词时，input事件持续高频触发，无需每输入一个字就请求接口。通过防抖，设置300ms延迟，用户停止输入后再发起搜索请求，极大减少接口请求量，避免接口拥堵、页面抖动。
输入框表单校验：手机号、邮箱、密码实时校验，用户连续输入时无需反复校验，输入暂停后统一校验，降低DOM计算和正则执行消耗。
窗口resize监听：浏览器窗口拖拽缩放时，resize事件毫秒级触发，防抖可在用户停止缩放后，仅执行一次布局适配、响应式更新逻辑。
鼠标悬浮弹窗展示：鼠标快速划过列表项时，避免弹窗频繁闪烁，鼠标停留指定时长后再展示弹窗，提升交互体验。
编辑器实时保存：富文本编辑器、markdown编辑器内容修改后，延迟1s执行自动保存，避免频繁调用保存接口。
3. 基础可落地代码（ES6）
包含立即执行和延迟执行两种模式，适配不同业务：
// 防抖函数 function debounce(fn, delay = 300, immediate = false) { let timer = null; return function(...args) { // 清空上一次定时器，重置计时 if (timer) clearTimeout(timer); // 立即执行模式：首次触发立即执行，后续延迟内触发不重复执行 if (immediate && !timer) { fn.apply(this, args); } // 延迟执行模式：停止触发后延迟执行 timer = setTimeout(() => { // 非立即执行，触发回调 if (!immediate) { fn.apply(this, args); } timer = null; }, delay); }; }4. 业务兼容方案
（1）低版本浏览器兼容（IE9+）
兼容无剩余参数、无箭头函数的低版本环境，修复this指向和参数传递问题：
function debounce(fn, delay, immediate) { var timer = null; delay = delay || 300; immediate = immediate || false; return function() { var _this = this; var args = arguments; if (timer) clearTimeout(timer); if (immediate && !timer) { fn.apply(_this, args); } timer = setTimeout(function() { if (!immediate) { fn.apply(_this, args); } timer = null; }, delay); }; }（2）框架兼容（Vue/React）
Vue中避免防抖函数被重复创建（推荐写在methods外、或使用工具函数）；React函数组件需配合useRef存储定时器，避免组件刷新丢失timer实例。
5. 防抖取消方法（核心业务刚需）
业务中常需要终止未执行的防抖任务：如用户输入一半切换页面、关闭弹窗，需取消 pending 状态的请求/逻辑，避免无效执行、接口报错。
改造防抖函数，增加取消方法：
function debounce(fn, delay = 300, immediate = false) { let timer = null; const debounceFn = function(...args) { if (timer) clearTimeout(timer); if (immediate && !timer) { fn.apply(this, args); } timer = setTimeout(() => { if (!immediate) fn.apply(this, args); timer = null; }, delay); }; // 取消防抖：清空定时器，终止待执行逻辑 debounceFn.cancel = function() { clearTimeout(timer); timer = null; }; return debounceFn; } // 业务使用示例 const searchFn = debounce((val) => console.log('搜索：', val), 500); // 触发防抖 searchFn('前端'); // 取消未执行的防抖任务（如页面卸载、弹窗关闭） searchFn.cancel();二、节流（Throttle）实战指南
1. 核心原理
固定时间间隔内，无论触发多少次事件，仅执行一次函数，保持执行频率匀速、可控。简单概括：持续触发，匀速执行，不扎堆、不卡顿。
主流实现：时间戳版（立即执行）、定时器版（延迟执行）、双结合版（首尾都执行）。
2. 核心业务使用场景
所有需要持续监听、高频触发，但需限制执行频率的场景，优先使用节流。
页面滚动scroll监听：滚动过程中实时计算滚动位置、懒加载图片、展示回到顶部按钮，节流可控制100ms执行一次，避免滚动时大量代码堆积执行。
鼠标移动mousemove：拖拽元素、鼠标轨迹监听、悬浮跟随效果，限制执行频率，避免页面卡顿。
按钮高频点击防重放：提交按钮、支付按钮、点赞按钮，防止用户连续多次点击触发重复请求，节流可固定1s内仅执行一次。
视频播放进度监听：实时同步播放进度、记录播放位置，无需毫秒级更新，节流匀速更新即可。
触摸滑动touchmove：移动端滑动页面、拖拽弹窗，优化滑动流畅度，减少移动端性能消耗。
3. 落地代码（双结合版：首尾执行，体验最优）
// 节流函数（首尾都执行，适配大部分交互场景） function throttle(fn, interval = 200) { let timer = null; let lastTime = 0; return function(...args) { const nowTime = Date.now(); // 剩余时间不足，清空定时器，立即执行 if (nowTime - lastTime >= interval) { lastTime = nowTime; fn.apply(this, args); } else if (!timer) { // 时间未到，延迟执行尾部逻辑 timer = setTimeout(() => { lastTime = Date.now(); fn.apply(this, args); timer = null; }, interval - (nowTime - lastTime)); } }; }4. 业务兼容方案
（1）低版本浏览器兼容（IE9+）
function throttle(fn, interval) { var timer = null; var lastTime = 0; interval = interval || 200; return function() { var _this = this; var args = arguments; var nowTime = Date.now(); if (nowTime - lastTime >= interval) { lastTime = nowTime; fn.apply(_this, args); } else if (!timer) { timer = setTimeout(function() { lastTime = Date.now(); fn.apply(_this, args); timer = null; }, interval - (nowTime - lastTime)); } }; }（2）特殊业务兼容
针对动画渲染场景，可结合requestAnimationFrame做进阶节流，适配浏览器刷新频率，动画更流畅；低版本浏览器无requestAnimationFrame时，自动降级为定时器节流。
5. 节流取消方法
节流任务同样需要取消场景：如滚动停止、拖拽结束、组件销毁，终止剩余待执行的节流逻辑，避免内存泄漏、无效回调。
function throttle(fn, interval = 200) { let timer = null; let lastTime = 0; const throttleFn = function(...args) { const nowTime = Date.now(); if (nowTime - lastTime >= interval) { lastTime = nowTime; fn.apply(this, args); } else if (!timer) { timer = setTimeout(() => { lastTime = Date.now(); fn.apply(this, args); timer = null; }, interval - (nowTime - lastTime)); } }; // 取消节流：清空定时器，重置状态 throttleFn.cancel = function() { clearTimeout(timer); timer = null; lastTime = 0; }; return throttleFn; } // 业务使用示例 const scrollHandle = throttle(() => console.log('滚动更新'), 200); window.addEventListener('scroll', scrollHandle); // 页面离开时取消节流 scrollHandle.cancel(); window.removeEventListener('scroll', scrollHandle);三、防抖与节流核心选型对照表（业务快速决策）
特性 | 防抖（Debounce） | 节流（Throttle） |
|---|---|---|
执行逻辑 | 停止触发后执行1次 | 固定间隔匀速执行 |
核心场景 | 搜索、校验、resize、保存 | 滚动、拖拽、点击防重、滑动 |
终止方式 | 清空定时器+置空变量 | 清空定时器+重置时间戳 |
适用诉求 | 减少无效末尾执行 | 控制过程执行频率 |
四、业务高频避坑要点
必须取消监听/任务：组件卸载、页面跳转、弹窗关闭时，务必调用cancel方法并移除事件监听，防止定时器残留导致内存泄漏、接口报错、页面卡死。
合理设置延迟时间：搜索防抖推荐300-500ms，滚动节流推荐150-200ms，按钮防重推荐1000ms，根据交互体验微调，避免延迟过高导致感知卡顿。
避免重复实例化：框架开发中，防抖/节流函数需全局实例化，不要写在渲染循环、render函数中，否则每次渲染生成新函数，失效限流效果。
立即执行场景慎用：按钮防重适合立即执行+节流，搜索联想适合延迟执行+防抖，场景匹配错误会导致交互异常。
