从事件监听器触发两个函数（一个被限制，另一个没有）答案

【问题标题】：Firing two functions from an event listener (one throttled, the other not)从事件监听器触发两个函数（一个被限制，另一个没有）
【发布时间】：2018-01-08 23:32:44
【问题描述】：

我有一个滚动事件的事件监听器，它触发一个负责将元素附加到视口的函数。相同的滚动事件侦听器被限制以防止滚动事件的倾盆大雨（更易于管理）。用于限制的库是throttle-debounce。问题：限制handlePageScroll 正在限制该方法中包含的所有内容（当然）。

代码：

componentDidMount() {
  window.addEventListener('scroll', throttle(2000, this.handlePageScroll));
}

handlePageScroll = () => {
  someFn() // logic for appending an element, does not need throttling
  this.loadNextBatch(); // logic that actually needs to be throttled
};

我尝试在 handlePageScroll 内进行限制，但没有成功。有没有办法从事件监听器中触发两个函数？提前谢谢你。

【问题讨论】：

标签： javascript addeventlistener throttling

【解决方案1】：

这是一个解决方案，通过保持状态：

componentDidMount() {
  let throttled = false
  window.addEventListener('scroll', () => {
    if (!throttled) {
      throttle(2000, () => {
        this.loadNextBatch()
        throttled = false
      })()
      throttled = true
    }
    someFn()
  })
}

【讨论】：

这看起来很棒，除了由于某种原因在事件侦听器中使用箭头函数会导致油门中断。与addEventListener('scroll', throttle(2000, this.handlePageScroll)) 相比，它触发了很多次
哦，是的，你是对的，这是我的错误。我会在几分钟内用解决方案编辑我的答案。
@Jose 我现在更新了一个解决方案。我无法对其进行测试，但希望它对您有用！
没有骰子。除了我目前拥有的方式之外，尝试以任何其他方式拨打throttle 都会有问题^。我不明白为什么。它应该返回您传递给它的任何函数的节流副本。从那里你应该能够像任何其他函数一样调用它。 const throttled = throttle(2000, this.loadNextBatch);throttled();
啊，所以它返回一个你调用的函数？在throttle 调用的末尾添加一个简单的() 就足够了（立即调用返回的函数），请参阅我的更新答案。