javascript - RxJS - throttle 后的去抖动事件？

Question

我让用户滚动页面并在每个滚动事件中 - 我正在检查视口(viewport)中是否有新项目
(如果有，我会对这些新项目进行一些操作 - 现在不相关)。

所以我有这样的东西:

 const observable = Rx.Observable.fromEvent(window, 'scroll');

  const subscriber = observable.throttleTime(300 /* ms */).subscribe(
          (x) => {
            console.log('Next: event!');
          },
          (err) => {
            console.log('Error: %s', err);
          },
          () => {
            console.log('Completed');
          });

此代码按预期工作，我确实在每 300 毫秒后看到一条消息。

但是有一个问题。用户可能会在未完成 300 毫秒时滚动(不会引发事件)，并且在滚动时可以看到一个新项目。

这是我需要 debounce 方法的地方。 (这意味着“在最后一个事件时间的 X 毫秒之后 - 引发一个事件”)

这正是我所需要的。

I've tried this :

 const subscriber = observable.throttleTime(300 /* ms */).debounceTime(350)....

但我只看到去抖事件。

问题

如何使用 throttle 并在 throttle 结束时附加去抖？

Answer 1

您可以使用 merge 合并两个流:throttled 和 debounced。 Demo .

  const observable = Rx.Observable.fromEvent(window, 'scroll');

  const subscriber = observable
      .throttleTime(300 /* ms */)
      .map(() => 'throttle')
      .merge(observable
              .debounceTime(350)
              .map(() => 'debounce')
      )
      .subscribe(
          (x) => {
            console.log('Next: event!', x);
          },
          (err) => {
            console.log('Error: %s', err);
          },
          () => {
            console.log('Completed');
          });