防抖只执行最后一次，节流固定间隔执行一次。防抖适用于搜索框输入等场景，节流适用于滚动监听、按钮点击等场景，二者均用于优化频繁触发事件的性能问题。
在前端开发中，频繁触发的事件（如窗口滚动、输入框输入、鼠标移动等）容易造成性能问题。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); };}
使用方式：
“`javascriptconst searchInput = document.getElementById(‘search’);searchInput.addEventListener(‘input’, debounce(function (e) { console.log(‘搜索关键词:’, e.target.value);}, 300)); // 延迟300毫秒执行“`
节流函数：固定时间间隔执行一次
节流的原理是：保证函数在一定时间间隔内最多执行一次。无论事件触发多少次，函数都按设定的时间周期稳定执行。
适用场景：页面滚动监听、按钮点击防止重复提交、鼠标拖拽事件等。
AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务
56 查看详情
比如监听页面滚动位置来判断是否到达某个区域，如果每次滚动都计算，会造成大量重复运算。通过节流可降低执行频率。
节流函数实现（时间戳版本）：
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; } };}
使用方式：
“`javascriptwindow.addEventListener(‘scroll’, throttle(() => { console.log(‘当前滚动位置:’, window.pageYOffset);}, 100)); // 每100毫秒最多执行一次“`
防抖与节流的区别总结
虽然两者都能控制函数执行频率，但核心逻辑不同：
防抖：事件频繁触发时，只执行最后一次。适合“最后结果最重要”的场景。节流：保持规律性执行，中间可能丢失部分调用。适合需要“持续响应”的场景。
选择哪种方式取决于具体需求。例如，自动保存内容可用防抖（用户停笔后再保存），而游戏中的按键反馈更适合节流（需定期响应）。
实际项目中的优化建议
在真实应用中，可以结合工具库（如 Lodash）提供的 _.debounce 和 _.throttle 方法快速实现功能，它们还支持更多配置项，如立即执行、取消绑定等。
同时注意以下几点：
避免在每次渲染时重新创建防抖/节流函数，应将其缓存或定义在组件外部。在 React/Vue 等框架中，合理使用 useRef 或 computed 属性保存函数实例。对于需要立即执行的场景，可扩展防抖函数添加 leading 参数支持。
基本上就这些。掌握防抖与节流，不仅能提升性能，还能让交互更流畅。理解其原理并灵活运用，是每个前端开发者必备的技能。
以上就是JavaScript防抖与节流函数实战应用_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/302900.html
微信扫一扫 
支付宝扫一扫 
