使用节流函数后Wheel事件仍多次触发（Mac触控板异常）

这个问题我之前调试Mac端交互时也碰到过，其实核心原因是你用的时间戳模式节流函数和Mac触控板的wheel事件触发机制不兼容，给你拆解一下：

为什么会出现这个问题？ #

你写的节流函数是典型的时间戳实现：每次事件触发时，检查距离上次执行的时间是否超过wait，如果超过就立即执行并更新时间戳。这种模式的特点是在每个时间窗口的开头执行一次回调。

但Mac触控板的wheel事件和普通鼠标完全不一样：

• 普通鼠标滚轮滚一下，通常只触发1次wheel事件
• Mac触控板的滑动是带惯性的，系统会根据你的滑动速度、长度，在几百毫秒内连续触发多个间隔极短的wheel事件，甚至你抬手后，还会因为惯性继续触发几次

当这些连续的事件触发跨越了你的wait时间窗口（比如你设的500ms），时间戳模式的节流就会在每个新的时间窗口开头再次执行回调，滑动越长、惯性越久，触发次数就越多。

修复方案 #

我给你两种常用的修复思路，你可以根据需求选：

方案1：定时器模式节流（最适合你的场景） #

这种模式会确保在wait时间内，不管事件触发多少次，都只会执行一次回调，完美解决触控板惯性触发的问题：

function throttle(fn, wait) {
  let timer = null;
  return function() {
    // 如果定时器存在，说明还在等待期，直接忽略当前事件
    if (!timer) {
      fn();
      // 等待wait时间后清除定时器，允许下一次执行
      timer = setTimeout(() => {
        timer = null;
      }, wait);
    }
  }
}

function callback() { 
  // 你的业务逻辑代码
} 

something.addEventListener("wheel", throttle(callback, 500));

它的逻辑很简单：

1. 第一次触发事件时，立即执行回调，并启动一个定时器
2. 定时器未到期前，所有后续触发的事件都被忽略
3. 等到wait时间结束，定时器被清除，才允许下一次事件触发执行回调

方案2：带尾触发的混合模式节流 #

如果你需要处理滑动结束后的最后一次状态（比如滑动停止后更新某个UI），可以用这种结合时间戳和定时器的版本，既会在窗口开头执行，也会在窗口结束时执行一次：

function throttle(fn, wait) {
  let timer = null;
  let lastExecuteTime = 0;

  return function() {
    const now = Date.now();
    // 计算距离下次可执行的剩余时间
    const remainingTime = wait - (now - lastExecuteTime);
    
    // 剩余时间<=0，说明可以立即执行
    if (remainingTime <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      fn();
      lastExecuteTime = now;
    } else if (!timer) {
      // 还在等待期，且没有定时器，设置定时器在剩余时间后执行收尾
      timer = setTimeout(() => {
        fn();
        lastExecuteTime = Date.now();
        timer = null;
      }, remainingTime);
    }
  }
}

额外小提示 #

wheel事件在不同浏览器和设备上的行为差异挺大的，如果你追求更流畅的体验，也可以结合requestAnimationFrame来优化节流，确保回调在浏览器的重绘周期内执行，避免不必要的性能浪费。

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