Question

我有一个滚动事件的事件监听器，它触发一个负责将元素附加到视口的函数。同样的滚动事件监听器被限制以防止滚动事件的倾盆大雨（更易于管理）。用于节流的库是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内尝试限制但没有成功。有没有办法从事件监听器中激活两个函数？提前谢谢。

Answer 1

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

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

从事件监听器中触发两个函数（一个受限制，另一个不受限制）

1 个答案: