防抖和节流是前端优化高频事件的两种手段。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索联想等场景；节流则以固定频率执行，适合滚动监听等需定期响应的场景。两者均通过控制函数执行频率提升性能。
在前端开发中，频繁触发的事件（如窗口滚动、输入框输入、鼠标移动等）会带来性能问题。为了解决这类问题，防抖（Debounce）和节流（Throttle）是两种常用的优化手段。它们的核心目标是控制函数执行频率，减少不必要的调用，提升页面响应速度与整体性能。
防抖函数（Debounce）
防抖的原理是：当事件被频繁触发时，只执行最后一次操作。也就是说，在设定的时间内如果没有再次触发该事件，才执行对应的函数；如果在这段时间内又被触发，则重新计时。
典型应用场景包括：
- 搜索框输入联想，避免每次输入都发送请求
- 表单验证，用户停止输入后再校验
- 窗口调整大小后重新计算布局
实现一个基础的防抖函数：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, delay) { let timer = null; return function (...args) { const context = this; clearTimeout(timer); timer = setTimeout(() => { func.apply(context, args); }, delay); }; }使用示例：
const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function(e) { console.log('执行搜索:', e.target.value); }, 300));这段代码确保用户输入停止300毫秒后才触发搜索逻辑，有效减少了请求次数。
节流函数（Throttle）
节流的原理是：规定一个固定时间间隔，在这个间隔内最多只允许函数执行一次。即使事件持续触发，函数也不会超过这个频率执行。
适用于需要持续响应但不需要每次都处理的场景，例如：
- 页面滚动监听，控制滚动条位置更新频率
- 鼠标拖拽事件，限制位置更新速度
- 按钮点击防止重复提交（部分场景）
节流可以通过时间戳或定时器实现。以下是基于时间戳的实现方式：
function throttle(func, delay) { let previous = 0; return function (...args) { const now = Date.now(); const context = this; if (now - previous >= delay) { func.apply(context, args); previous = now; } }; }或者使用定时器方式，保证首次立即执行，末次也能被执行：
function throttle(func, delay) { let timer = null; return function (...args) { const context = this; if (!timer) { func.apply(context, args); timer = setTimeout(() => { timer = null; }, delay); } }; }使用示例：
window.addEventListener('scroll', throttle(() => { console.log('滚动中，但不会太频繁'); }, 100));防抖与节流的区别
虽然两者都用于限制函数执行频率，但适用场景不同：
- 防抖：适合“只关心最终结果”的场景，比如输入完成后的搜索、表单提交前校验等。它会将多次触发合并为一次执行。
- 节流：适合“需要定期响应”的场景，比如滚动、拖拽、动画等。它保证函数以稳定的频率执行。
简单记忆：防抖是“等你不打了我才动”，节流是“每隔一段时间我就动一次”。
实际应用中的注意事项
在真实项目中使用防抖和节流时，有几个细节需要注意：
- 保持 this 指向正确：使用 apply 或 call 绑定原始上下文
- 传递参数：确保事件对象等参数能传入原函数
- 可取消功能：高级实现可以支持 cancel 方法清除等待中的任务
- 结合业务选择策略：是否需要立即执行？是否需要结尾补调？这些会影响具体实现方式
基本上就这些。理解防抖和节流的原理，并根据场景选择合适的方式，能显著提升 Web 应用的性能表现。不复杂但容易忽略。
