防抖是将多次连续调用合并为最后一次执行的技术，用于高频事件如输入、缩放、滚动，通过setTimeout与clearTimeout控制延迟执行，避免资源浪费。
JavaScript防抖（Debounce）是一种限制函数执行频率的技术，核心思想是：**把多次连续的调用合并成最后一次执行**。它特别适合处理高频触发事件（比如窗口缩放、输入框搜索、滚动监听），避免函数被无意义地反复调用，从而显著减少计算量、降低渲染压力、节省资源。
防抖解决什么问题？
很多用户交互会瞬间触发几十甚至上百次事件。例如：
用户在搜索框快速输入“react”，每按一个键就触发一次 input 事件 → 默认会调用 6 次请求或校验逻辑； 拖拽调整浏览器窗口大小，resize 事件可能在几百毫秒内触发数十次； 滚动页面时 scroll 事件频繁触发，若每次都在回调里计算元素位置，容易卡顿。
这些场景下，中间的多数调用不仅没必要，还浪费 CPU 和网络资源。防抖就是让系统“等一等”，只响应最后那一下。
防抖怎么实现？
本质是用 setTimeout + clearTimeout 控制执行时机：
立即学习“Java免费学习笔记（深入）”；
每次触发时，先清除上一次设定的定时器； 再重新设置一个新的定时器，延迟执行目标函数； 如果在延迟期间再次触发，就又清掉重设——只有“静默”够久，函数才会真正运行。
简单示例：
function debounce(fn, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); };}// 使用：输入停止 300ms 后才搜索const search = debounce(() => { console.log('发起搜索请求');}, 300);input.addEventListener('input', search);
和节流（Throttle）有什么区别？
防抖和节流都用于限频，但策略不同：
防抖：只响应“最后一次”，适合需要“最终结果”的场景，如搜索、表单验证、窗口尺寸最终值； 节流：固定时间间隔内最多执行一次，适合需要“持续反馈”的场景，如滚动加载、鼠标跟随、游戏帧更新。
一句话记住：防抖是“等你停下再干”，节流是“我按自己的节奏来”。
使用时要注意什么？
防抖看似简单，实际用错很常见：
this 和参数丢失：记得用 fn.apply(this, args) 或箭头函数绑定上下文； 立即执行需求：标准防抖不支持首次立刻执行，如需“第一次马上执行，之后防抖”，得扩展逻辑（叫 leading edge）； 清理副作用：如果防抖函数里发了请求，而新请求发出前旧请求还没完成，建议配合 AbortController 取消上一个； 延迟值要合理：太短（如 50ms）起不到效果，太长（如 1s）会让用户觉得卡顿，通常 100–300ms 较平衡。
基本上就这些。防抖不是黑科技，但用对了，能悄悄让页面顺滑不少。
以上就是JavaScript防抖是什么_它如何优化性能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542876.html
微信扫一扫 
支付宝扫一扫 
