防抖只执行最后一次，节流固定间隔执行一次。防抖适用于搜索框输入等场景，节流适用于滚动监听、按钮点击等场景，二者均用于优化频繁触发事件的性能问题。
在前端开发中，频繁触发的事件（如窗口滚动、输入框输入、鼠标移动等）容易造成性能问题。JavaScript中的防抖（debounce）和节流（throttle）是两种常用的优化手段，用于控制函数执行频率，提升页面响应速度与用户体验。
防抖函数：只执行最后一次操作
防抖的核心思想是：当事件被触发后，设置一个延迟定时器，若在延迟时间内事件再次触发，则清除之前的定时器并重新计时。只有当事件停止触发超过指定时间后，才会执行目标函数。
适用场景：搜索框输入联想、表单验证、窗口大小调整后重新渲染等。
例如，在搜索框中用户每输入一个字符就发起请求，如果不加限制，会频繁调用接口。使用防抖后，仅在用户停止输入一段时间后再发送请求。
立即学习“Java免费学习笔记（深入）”；
防抖函数实现：
function debounce(func, wait) { let timeout; return function (...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); }; }
使用方式：
“`javascript const searchinput = document.getElementById(‘search’); searchInput.addEventListener(‘input’, debounce(function (e) { console.log(‘搜索关键词:’, e.target.value); }, 300)); // 延迟300毫秒执行 “`
节流函数：固定时间间隔执行一次
节流的原理是：保证函数在一定时间间隔内最多执行一次。无论事件触发多少次，函数都按设定的时间周期稳定执行。
适用场景：页面滚动监听、按钮点击防止重复提交、鼠标拖拽事件等。
比如监听页面滚动位置来判断是否到达某个区域，如果每次滚动都计算，会造成大量重复运算。通过节流可降低执行频率。
节流函数实现（时间戳版本）：
function throttle(func, wait) { let previous = 0; return function (...args) { const now = Date.now(); const context = this; if (now - previous > wait) { func.apply(context, args); previous = now; } }; }
使用方式：
“`javascript window.addEventListener(‘scroll’, throttle(() => { console.log(‘当前滚动位置:’, window.pageYOffset); }, 100)); // 每100毫秒最多执行一次 “`
防抖与节流的区别总结
虽然两者都能控制函数执行频率，但核心逻辑不同：
- 防抖：事件频繁触发时，只执行最后一次。适合“最后结果最重要”的场景。
- 节流：保持规律性执行，中间可能丢失部分调用。适合需要“持续响应”的场景。
选择哪种方式取决于具体需求。例如，自动保存内容可用防抖（用户停笔后再保存），而游戏中的按键反馈更适合节流（需定期响应）。
实际项目中的优化建议
在真实应用中，可以结合工具库（如 Lodash）提供的 _.debounce 和 _.throttle 方法快速实现功能，它们还支持更多配置项，如立即执行、取消绑定等。
同时注意以下几点：
- 避免在每次渲染时重新创建防抖/节流函数，应将其缓存或定义在组件外部。
- 在 react/vue 等框架中，合理使用 useRef 或 computed 属性保存函数实例。
- 对于需要立即执行的场景，可扩展防抖函数添加 leading 参数支持。
基本上就这些。掌握防抖与节流，不仅能提升性能，还能让交互更流畅。理解其原理并灵活运用，是每个前端开发者必备的技能。
以上就是JavaScript防抖与节流函数实战应用_