RxJS - 節流后去抖事件？

Question

我讓用戶在每個滾動事件中滾動頁面 - 我正在檢查視口中是否有新項目
（如果有，我會對這些新項目進行一些操作 - 現在無關緊要）。

所以我有這樣的事情：

 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 毫秒之后 - 引發事件” ）

這正是我所需要的。

我試過這個：

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

但我只看到去抖動的事件。

題

如何使用油門並在油門結束時附加去抖？

Answer 1

您可以將兩個流合並：使用merge節流和去抖動merge為一個。 演示。

  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');
          });

Answer 2

由於 rxjs 更改，這里是更新的解決方案

import { fromEvent } from 'rxjs';
import { debounceTime, map, throttleTime } from 'rxjs/operators';

const observable = fromEvent(window, 'scroll');

const subscriber = observable
  .pipe(
    throttleTime(300 /* ms */),
    map((data) => {
      console.log('throttle');
      console.log(window.pageYOffset);
      return data;
    }),
    debounceTime(350)
  )
  .subscribe(
    (x) => {
      console.log(window.pageYOffset);
    },
    (err) => {
      console.log('Error: %s', err);
    },
    () => {
      console.log('Completed');
    }
  );