Question

我正在无限滚动以显示带有Angular组件的数据。这个想法是当我发生滚动事件时，我会要求通过调用API时更改limit的值来获取更多数据。

如果data.length < limit && data.length === currentData.length，我将停止调用API，但是由于一切都是异步的，因此该组件至少调用相同请求10次以增加限制以接收相同数据。停止通话的逻辑是在subscribe处理程序中。

我认为我不仅需要捕获scroll end事件，而且还需要捕获scroll事件，还有其他方法可以解决此问题吗？

Answer 1

如果我理解正确，则您遇到的问题是由浏览器多次触发的滚动事件引起的。要避免这么大的开销，您可以执行一个简单的去抖动机制，以避免在特定间隔内多次调用相同的api。

类似：

function debounce(fn, debounceTime = 500) {
  let timeout = -1;
  const currentScope = this;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(fn.bind(currentScope, ...args), debounceTime);
  }
}

，然后调用您的loadData函数

const softLoadData = debounce(loadData);

这时，您的新功能softLoadData在满足您需要的500毫秒（您可以选择）的间隔内将不会被多次调用。

Answer 2

我认为您应该将一些布尔值标记为“等待数据”-只要数据没有完全加载并且更新了相应的刷新，滚动事件就不会起作用。

如果数据相同，则停止发送请求

2 个答案: