mousewheel事件多次触发：如何实现滚动时仅单次触发？

滚动事件（包括mousewheel）本身就会在用户滚动时频繁触发，要让它只按你需要的频率触发（比如滚动停止后触发一次，或者固定间隔触发），最实用的方案是防抖（Debounce）和节流（Throttle），下面给你详细演示怎么用：

方法一：防抖（Debounce）—— 滚动停止后触发一次 #

防抖的核心逻辑是：只有当用户停止滚动超过设定的时间后，才执行目标函数。特别适合需要在滚动结束后完成的操作，比如计算元素位置、触发懒加载。

先定义一个防抖工具函数，再把你的事件处理函数包裹进去：

// 防抖工具函数：func是要执行的目标函数，delay是延迟时间（单位：毫秒）
function debounce(func, delay) {
  let timeoutId;
  return function() {
    // 每次触发滚动事件时，清除之前的定时器
    clearTimeout(timeoutId);
    // 重新设置定时器，等用户停止滚动delay毫秒后再执行函数
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定mousewheel事件，用防抖函数包裹你的逻辑
$(window).bind('mousewheel', debounce(function(event) {
  console.log("fire");
}, 300)); // 这里的300ms可根据需求调整，比如改成200或500

方法二：节流（Throttle）—— 滚动过程中定期触发 #

节流的核心逻辑是：不管滚动多频繁，每隔固定时间就执行一次目标函数。适合需要在滚动过程中持续执行但又不能太频繁的操作，比如实时更新导航栏样式、滚动时加载内容。

先定义节流工具函数：

// 节流工具函数：func是要执行的目标函数，limit是时间间隔（单位：毫秒）
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    // 如果不在节流状态，就执行函数，并标记为节流中
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      // 过了limit毫秒后，解除节流状态，允许下次执行
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 绑定mousewheel事件，用节流函数包裹你的逻辑
$(window).bind('mousewheel', throttle(function(event) {
  console.log("fire");
}, 500)); // 这里的500ms可根据需求调整

两种方法的选择建议 #

• 如果你需要的是“用户停止滚动后才执行一次”，选防抖
• 如果你需要的是“滚动过程中每隔一段时间执行一次”，选节流

你可以根据自己的实际场景调整延迟/间隔时间，找到最适合的触发频率~

内容的提问来源于stack exchange，提问作者user7927930