【问题标题】:Pass scroll event data into throttle function将滚动事件数据传递给油门函数
【发布时间】:2019-03-14 13:58:38
【问题描述】:

我正在尝试使用 wheel 事件和节流函数创建自己的简单全高滚动脚本(因为我只希望每 X 毫秒注册 1 个滚动。我想传递 @987654322 的事件数据@event 到被我的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 的另一个函数中? )

【问题讨论】:

    标签: javascript addeventlistener throttling


    【解决方案1】:

    只需传递参数:

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

    【讨论】:

    • window.addEventListener... 行应该是什么样的?
    • @jj window.addEventListener('wheel', throttle(onScroll, 700), false);
    • 如何将事件数据传递给 onScroll 函数?我究竟用什么替换“...args”?没有使用您编写的代码传递给throttle() 的事件数据,因此没有要传递的参数...
    • @jj 确实如此,...onScroll 将被调用,第一个参数是事件
    • 啊,好吧,对不起,我很抱歉,我以前从未遇到过...args,所以对此感到困惑,我会接受你的回答,但最好包括整个更新的 sn-p + ...args 的解释链接或其他内容,谢谢! :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-05-29
    • 2011-04-13
    • 2016-03-27
    • 2018-05-24
    • 2010-10-04
    • 1970-01-01
    • 2011-09-11
    相关资源
    最近更新 更多