代码之家 › 专栏 › 技术社区 › Raphaël VO

如果得到相同的数据,停止发送请求

infinite-scroll request asynchronous angular javascript

1

Raphaël VO · 技术社区 · 7 年前

我正在研究一个无限的卷轴来显示带有角度分量的数据。我的想法是当我得到scroll事件时,我将通过更改 limit 当调用API时。

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

我想我需要抓住 scroll end 不仅仅是事件 scroll 但是这个事件不存在,有没有其他方法来解决这个问题?

2 回复 | 直到 7 年前

1

Karim 7 年前

如果我理解正确,您遇到的问题是由浏览器多次触发的滚动事件引起的。为了避免这种巨大的开销,您可以实现一个简单的去缓冲机制,以避免在特定时间间隔内多次调用同一个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毫秒的间隔内(您可以选择)不会被调用多次。

2

0

Shushan 7 年前

我认为您应该将一些布尔值标记为“等待数据”,并且只要数据没有完全加载并且相应地更新了,scroll事件就不会执行任何操作。