尽管使用油门，"Wheel"事件仍会多次触发

Question

我试着做这样的事情：

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次。有什么问题？

Answer 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滚动捕捉属性。