javascript - RxJS - 无限滚动 - 在上一个未到达时发送请求

Question

我是响应式编程的新手，这是我对 RxJs 的第一件事，无限滚动:

public pageByScroll$ = Observable.fromEvent(window, "scroll")
  .map(() => document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight)
  .filter(x => x < 800)
  .debounceTime(200)
  .scan(count => count + 1, 0);


handleScroll() {
  this.pageByScroll$.subscribe(
    pageToLoad => this.advertiserService
      .getAdvertisersByPage(pageToLoad)
      .subscribe(advertisers => this.advertisers = this.advertisers.concat(advertisers))
  );
};

getAdvertisersByPage(page: number): Observable<AdvertiserClass[]> {
    return this.http.get(this.advertisersUrl + '/pager/' + page)
     .map(res => {
       return res.json().map(advertiser => {
         return new AdvertiserClass(advertiser);
       });
     });
 }

我的问题是来自测试数据库服务器很远，它需要 1+sec 来接收数据。
如果我在未收到新数据且页面高度很小的情况下继续滚动，它会不断发送下一页的请求。我如何才能在未收到前一个请求时等待发送请求？

Answer 1

漂亮的 pageByScroll 函数。

正如@pixelbits 所说，基本问题是 this.pageByScroll$.subscribe() 应该是 this.pageByScroll$.map()，但要玩弄它我注意到它也在向上滚动页面。

你可以通过记住上次看到的 scrollTop 来解决这个问题。
请注意，如果您向下、向上、向下滚动，这也适用。

const pageByScroll$ = Observable.fromEvent(window, "scroll")
  .map(() => document.documentElement.scrollTop)
  .scan((scrollTop, last) => scrollTop > last ? scrollTop : last, 0)
  .distinctUntilChanged()
  .map(downwardScrollTop => 
    document.documentElement.scrollHeight
       - downwardScrollTop
       - document.documentElement.clientHeight
    )
  .filter(x => x < 800)
  .debounceTime(200)
  .scan(count => count + 1, 0)