JavaScript 防抖与节流怎么控制滚动事件频率-js教程-PHP中文网

通过封装函数并配合定时器或时间戳记录，可以分别实现防抖和节流来控制滚动事件的触发频率。防抖适用于搜索输入等需要等待用户操作停止的场景，而节流适用于滚动加载、鼠标移动等需要保持一定执行频率的场景。

JavaScript 防抖与节流怎么控制滚动事件频率

如何实现滚动事件防抖

防抖的核心逻辑是：在事件被频繁触发时，每次重置定时器，只有当最后一次触发后经过指定的延迟时间仍未再次触发，才执行真正的处理函数。对于滚动事件，这能有效减少高频计算带来的性能开销。

JavaScript 防抖与节流怎么控制滚动事件频率

function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 使用示例
const handleScroll = () => console.log('Scroll processed');
document.addEventListener('scroll', debounce(handleScroll, 300));

上述代码中，debounce 函数接收目标函数 func 和延迟时间 delay。每次滚动事件触发时，如果存在旧的定时器则清除它，并重新设置一个新的定时器。只有当用户在 300ms 内不再滚动时，handleScroll 才会被执行一次。

如何实现滚动事件节流

节流的核心逻辑是：确保函数在指定的时间间隔内只执行一次。无论滚动事件触发多少次，在第一个时间周期结束后，下一个周期开始后才能再次执行。这对于控制滚动时的动画更新或数据请求非常有效。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

JavaScript 防抖与节流怎么控制滚动事件频率

function throttle(func, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 使用示例
const handleScroll = () => console.log('Scroll processed');
document.addEventListener('scroll', throttle(handleScroll, 100));

在 throttle 函数中，我们记录上一次执行的时间 lastTime。每次滚动事件触发时，计算当前时间与上次执行时间的差值。如果差值大于等于设定的间隔 interval（例如 100ms），则执行函数并更新时间戳；否则忽略本次触发。这种方式保证了函数执行的频率上限。