如何实现鼠标滚动时仅触发一次指定函数？

这个问题太常见了！浏览器的滚动事件本身就是高频派发的，只要滚动还在进行，就会不断触发事件，所以你的console.log刷几十次完全是正常现象。要实现“单次滚动仅触发一次函数”，我们可以用**防抖（Debounce）或者节流（Throttle）**来控制函数的执行时机，这里防抖更贴合你的需求——它会让函数在滚动停止后的一段等待时间后才执行，完美避免频繁触发。

方法一：使用防抖函数（推荐） #

防抖函数的核心逻辑是：每次触发事件时，清除之前的定时器，重新计时；只有当事件停止触发超过设定的时间后，才真正执行目标函数。

首先定义一个通用的防抖工具函数：

function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    // 每次触发事件时，清除之前的定时器
    clearTimeout(timeoutId);
    // 重新设置定时器，等待delay毫秒后执行函数
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

然后修改你的滚动事件绑定代码，把处理逻辑用防抖函数包装起来：

// 封装你的滚动处理逻辑
function handleScroll(event) {
  if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0) {
    console.log("Scrolled");
  }
}

// 用防抖包装处理函数，这里设置200ms的等待时间，可根据需求调整
const debouncedScrollHandler = debounce(handleScroll, 200);

// 绑定滚动事件时使用包装后的函数
$(window).bind("mousewheel DOMMouseScroll", debouncedScrollHandler);

这样设置后，只有当用户停止滚动超过200ms时，console.log("Scrolled")才会执行一次，完全符合你的需求。

方法二：使用标志位快速实现 #

如果你需要更简单的实现方式，可以用一个布尔变量作为“开关”，触发一次后暂时锁住，过一段时间再解锁：

// 初始化开关为未触发状态
let isScrollActive = false;

$(window).bind("mousewheel DOMMouseScroll", function(event) {
  // 只有当开关未激活，且是向下滚动时才执行
  if (!isScrollActive && (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0)) {
    isScrollActive = true;
    console.log("Scrolled");
    // 300ms后解锁，允许下次滚动触发
    setTimeout(() => {
      isScrollActive = false;
    }, 300);
  }
});

这个方法的优点是代码更简洁，适合快速验证；缺点是如果用户在锁定时间内继续滚动，会错过触发，适合对触发时机要求不高的场景。

小提示 #

• 防抖的delay参数可以根据实际需求调整，比如设置为150ms或300ms，找到最适合你的交互节奏。
• 如果需要在滚动过程中每隔固定时间触发一次（而不是停止后触发），可以改用节流（Throttle）函数，逻辑类似但核心是固定时间内只执行一次。

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