将滚动事件数据传递给油门函数

Question

我正在尝试使用 wheel 事件和节流功能创建我自己的简单全高滚动脚本（因为我只希望每 X 毫秒注册 1 个滚动。我想传递事件数据wheel 事件到被我的 throttle() 函数限制的函数中。

这是我的代码的简化版本：

function throttle(callback, limit) {
    var wait = false; // Initially, we're not waiting
    return function () { // We return a throttled function
        if (!wait) { // If we're not waiting
            callback.call(); // Execute users function
            wait = true; // Prevent future invocations
            setTimeout(function () { // After a period of time
                wait = false; // And allow future invocations
            }, limit);
        }
    }
}

function onScroll(event) {
  // do stuff here on scroll
}

window.addEventListener('wheel', throttle(onScroll, 700), false);

如果我不需要来自 wheel 事件的数据，这会很好地工作，但我需要使用 event.deltaY 确定我的 onScroll() 函数内部的滚动方向。

基本上我想将最后一行更改为以下内容（虽然我知道这行不通）：

window.addEventListener('wheel', throttle(onScroll(event), 700), false);

所以...

如何将 wheel 事件数据传递给 onScroll() 函数，同时仍然对其进行限制？

我试过的：

我尝试了以下代码，以便我可以将 event 数据传递给 throttle() 函数，该函数成功运行

window.addEventListener('wheel', function(e) {
  throttle(onScroll, 700, e)
}, false);

但我不确定如何处理 throttle() 函数中的 e 才能将其传递给 onScroll() 函数。我尝试更改行：

callback.call(); // Execute users function

至：

callback.call(e); // Execute users function（使用e传入油门函数）

但这甚至阻止了 onScroll 函数被调用...（我假设是因为 throttle() 正在返回一个函数，但是这个返回的函数没有被调用，因为它被包装在另一个函数中在 eventListener?)

Answer 1

只需传递参数：

function throttle(callback, limit) {
  var wait = false;
  return function (...args) { 
    if (!wait) {
        callback(...args);
        wait = true; 
        setTimeout(function () { 
            wait = false; 
        }, limit);
    }
  }
}

将滚动事件数据传递给油门函数

Pass scroll event data into throttle function

javascript

throttling

addeventlistener