JavaScript防抖是什么_它如何优化性能？-js教程-PHP中文网

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

夢幻星辰

发布： 2025-12-16 17:56:02

原创

171人浏览过

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

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

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

防抖解决什么问题？

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

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

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

防抖怎么实现？

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

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

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

简单示例：

Gaga

曹越团队开发的AI视频生成工具

1151

查看详情

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);

登录后复制