JavaScript防抖是什么_它如何优化性能？

防抖是将多次连续调用合并为最后一次执行的技术，用于高频事件如输入、缩放、滚动，通过setTimeout与clearTimeout控制延迟执行，避免资源浪费。

JavaScript防抖（Debounce）是一种限制函数执行频率的技术，核心思想是：**把多次连续的调用合并成最后一次执行**。它特别适合处理高频触发事件（比如窗口缩放、输入框搜索、滚动监听），避免函数被无意义地反复调用，从而显著减少计算量、降低渲染压力、节省资源。

防抖解决什么问题？

很多用户交互会瞬间触发几十甚至上百次事件。例如：

• 用户在搜索框快速输入“react”，每按一个键就触发一次 input 事件 → 默认会调用 6 次请求或校验逻辑；
• 拖拽调整浏览器窗口大小，resize 事件可能在几百毫秒内触发数十次；
• 滚动页面时 scroll 事件频繁触发，若每次都在回调里计算元素位置，容易卡顿。

这些场景下，中间的多数调用不仅没必要，还浪费 CPU 和网络资源。防抖就是让系统“等一等”，只响应最后那一下。

防抖怎么实现？

本质是用 setTimeout + clearTimeout 控制执行时机：

立即学习“Java免费学习笔记（深入）”；

• 每次触发时，先清除上一次设定的定时器；
• 再重新设置一个新的定时器，延迟执行目标函数；
• 如果在延迟期间再次触发，就又清掉重设——只有“静默”够久，函数才会真正运行。

简单示例：

标签： react javascript java 浏览器 app edge 区别