我正在研究无限滚动以使用 Angular 组件显示数据。我的想法是当我收到滚动事件时,我会通过更改 limit
的值来要求获得更多数据。调用 API 时。
如果 data.length < limit && data.length === currentData.length
我将停止调用 API但是因为一切都是异步的,所以这个组件至少调用 10 次相同的请求来增加限制以接收相同的数据。停止调用的逻辑在 subscribe
中处理程序。
我想我需要捕获scroll end
事件不仅scroll
但是这个事件不存在,有没有其他方法可以解决这个问题?
最佳答案
如果我没理解错的话,你遇到的问题是浏览器多次触发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 毫秒(您可以选择)的间隔内根据您的需要调用多次。
关于javascript - 如果得到相同的数据,则停止发送请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53449604/