防抖和节流是前端优化高频事件的两种手段。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索联想等场景；节流则以固定频率执行，适合滚动监听等需定期响应的场景。两者均通过控制函数执行频率提升性能。
在前端开发中，频繁触发的事件（如窗口滚动、输入框输入、鼠标移动等）会带来性能问题。为了解决这类问题，防抖（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 应用的性能表现。不复杂但容易忽略。
以上就是JavaScript防抖与节流函数原理与实现_javascript性能优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533781.html
微信扫一扫 
支付宝扫一扫 
