尽管使用油门，但“轮子”事件多次触发答案

【问题标题】："Wheel" event triggers more than once despite using throttle尽管使用油门，但“轮子”事件多次触发
【发布时间】：2020-03-19 15:45:13
【问题描述】：

我尝试做这样的事情：

function throttle(fn, wait) {
    var time = Date.now();
    return function() {
      if ((time + wait - Date.now()) < 0) {
        fn();
        time = Date.now();
      }
    }
}

function callback() {
    //something
}

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

当我使用鼠标滚轮时，它似乎工作得很好并且只触发一次。问题是当我使用 Macbook 的触摸板时，此事件会一次触发 1、2 或 3 次（取决于滑动的长度）。有什么问题？

【问题讨论】：

听上去，你希望这个事件只触发一次？ ....
是的，每个时间跨度一次。更大的问题是为什么触摸板一次触发“滚轮”事件超过 1 次。
... 你有没有想过尝试以滚动事件为目标并改变你的“节流”逻辑？抱歉，我不确定您要达到什么目标，至少没有足够的信心提供答案。
另一个小问题，你熟悉setTimeout吗？

标签： javascript events throttling

【解决方案1】：

你的代码没问题，问题是当你用触摸板“滚轮”时，你触发了滚轮事件很多，尤其是很多非常小的值。

例如，如果您尝试使用触摸板滚动此页面，您会注意到滚动的流畅度。这是因为许多事件都是以递减值触发的。

油门是一个好的开始，但还不够。升级是取消具有非常小的 delta 值的车轮事件，如下所示：

function throttle(fn, wait) {
    var time = Date.now();

    return function(event) {
      // we dismiss every wheel event with deltaY less than 4
      if (Math.abs(event.deltaY) < 4) return

      if ((time + wait - Date.now()) < 0) {
        fn(event);
        time = Date.now();
      }
    }
}

function callback(event) {
    // something
}

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

它不会是“完美的”，而是接近的。

如果你想要一个完美的结果，一些高级数学是必要的。当我的意思是高级时，我的意思是我自己需要一到两周的全职时间才能在所有设备上干净地实施它。

如果你想控制滚轮从屏幕A滚动到屏幕B，你应该查看css scroll snapping property。

【讨论】：