1回答

张轩

2025-03-08

同学你好

什么是事件抖动？

事件抖动（Event Debouncing）是指在短时间内连续触发同一个事件多次，但我们只希望处理其中的一次（通常是最后一次）的情况。举个生活中的例子：想象你在电梯里按楼层按钮，如果你快速连续按了同一个按钮多次，电梯并不会因此多次停在那一层，而是只响应一次。这就是一种"抖动控制"的思想。

在编程中，常见的抖动场景包括：

用户快速点击按钮

用户在输入框中快速输入文字

用户调整窗口大小

用户滚动页面

为什么需要解决抖动问题？

不处理抖动可能导致：

性能问题：如果每次事件都触发复杂计算或网络请求，会造成资源浪费

用户体验问题：可能导致界面闪烁或卡顿

逻辑错误：某些情况下可能导致程序行为异常

如何解决抖动问题？

防抖（Debounce）

原理：在事件被触发n秒后再执行回调，如果n秒内又被触发，则重新计时。

适用场景：适合最终状态比过程更重要的场景，如搜索框输入、窗口调整大小等。

简单实现：

function debounce(func, wait) {
  let timeout;
  
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用示例
const debouncedSearch = debounce(function(text) {
  console.log("搜索:", text);
}, 300);

// 当用户在输入框中输入时调用
searchInput.addEventListener("input", function(e) {
  debouncedSearch(e.target.value);
});

1

2

张轩

回复

weixin_慕丝4457541

React 也是前端框架，使用的原理是一样的，可以使用封装好的 hooks：https://usehooks.com/usedebounce

2025-03-10

共2条回复