javascript - 如果得到相同的数据，则停止发送请求

Question

我正在研究无限滚动以使用 Angular 组件显示数据。我的想法是当我收到滚动事件时，我会通过更改 limit 的值来要求获得更多数据。调用 API 时。

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

我想我需要捕获scroll end事件不仅scroll但是这个事件不存在，有没有其他方法可以解决这个问题？

Answer 1

如果我没理解错的话，你遇到的问题是浏览器多次触发scroll事件引起的。为避免这种巨大的开销，您可以做的是实现一个简单的去抖动机制，以避免在特定时间间隔内多次调用相同的 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 毫秒(您可以选择)的间隔内根据您的需要调用多次。