RXJS - 只发出比最后一个值更大的值

Question

我想使用 rxjs 为我的网站实现一个滚动侦听器。监听器当前发出每个scrollY 数字。是否可以实现一个滚动侦听器，如果数字高于以前，则仅发出滚动位置而不存储状态属性。我只想通过运营商来解决这个问题。当前的实现如下所示：

  public lastScrolledHeight: number = 0;
  ...
  public ngOnInit() {
    this.listenForScroll()
      .subscribe(scrollHeight => {
        this.showAddButton = this.lastScrolledHeight >= scrollHeight; // true or false
        this.lastScrolledHeight = scrollHeight;
      });
  }

  private listenForScroll(): Observable<number> {
    return fromEvent(window, 'scroll').pipe(
      debounceTime(25),
      map((e: any) => e.path[1].scrollY)
    );
  }

提示

一种方法已经可以是添加startsWith(0)操作员。这会将初始位置发送到 0。但是如果或scan()会有所帮助，我不知道。filter()reduce()

用例

我向下滚动到 Y=300。应发出 300 个。我向上滚动到 Y= 50。不应发出任何内容。我再次向下滚动到 150，应该发出 150。

Answer 1

您可以将scan运算符与 一起使用distinctUntilChanged：

return fromEvent(window, 'scroll').pipe(
  debounceTime(25),
  map((e: any) => e.path[1].scrollY),
  scan((prev, curr) => Math.max(prev, curr), 0),
  distinctUntilChanged()
)

发生的情况是可观察量被修改为包含当前和上一次迭代的最大值（并且将值 0 作为初始值）。

之后，distinctUntilChanged()确保可观察对象不会发出重复事件。

这可确保您只会收到大于前一个值的值。