防抖和节流是前端优化高频事件的两种技术。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索框输入等场景；节流则保证单位时间内最多执行一次，适合滚动监听等持续触发场景。两者核心都是控制函数执行频率，提升性能。
在前端开发中，频繁触发的事件如窗口滚动、窗口缩放、输入框输入等，容易导致性能问题。为优化这类场景，防抖（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); };}
使用示例：
“`javascriptconst 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) { timer = setTimeout(() => { func.apply(context, args); timer = null; }, delay); } };}
使用示例：
“`javascriptwindow.addEventListener(‘scroll’, throttle(() => { console.log(‘页面滚动’);}, 100));“`
这样每100毫秒最多输出一次“页面滚动”，避免因频繁触发而影响性能。
防抖与节流的区别总结
防抖：事件停止触发后延迟执行，中间多次触发只执行最后一次。节流：固定时间间隔执行一次，不管触发多少次，保持节奏执行。比如用户连续快速滚动页面，防抖会让回调在滚动结束后才执行一次，而节流会每隔一段时间执行一次，直到结束。
实际应用中的选择建议
需要等待用户操作完成后再执行（如搜索、自动保存），选防抖。需要持续响应但不能太频繁（如滚动监听、拖拽、动画更新），选节流。可结合业务需求进行定制，例如首次立即执行的防抖，或节流中的“开始立即执行”模式。
基本上就这些。掌握防抖和节流的原理与实现，能有效提升网页性能和用户体验。不复杂但容易忽略细节，建议理解后封装成工具函数复用。
以上就是JavaScript防抖与节流函数原理与实现_javascript优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538052.html
微信扫一扫 
支付宝扫一扫 
