RXJS - 仅在空闲时启动计时器？

Question

我使用的流在我滚动窗口时会受到限制。
在节流时（只要滚动），它会向控制台发出值。

但是，当流空闲时（用户不滚动窗口） - 我想要一个计时器启动。但是 - 如果用户再次开始滚动 - 我不希望那个计时器发出值。

目前我正在这样做：

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

  const subscriber = observable
      .throttleTime(300 )
      .map(() => 'throttle')
      .merge(Rx.Observable.interval(1000).map(() => 'tick') )
      .subscribe(
          (x) => {
            console.log('Next: event!', x);
          },
          (err) => {
            console.log('Error: %s', err);
          },
          () => {
            console.log('Completed');
          });

问题是，在滚动时 - 我同时看到 "throttle" 和 "tick"（我应该只看到“油门”）

从另一个 POV 考虑这个问题。工作总是要运行。如果我滚动 - 那个受限制的滚动 - 应该调用该作业。如果我不滚动 - 计时器应该启动并开始工作。 （如果用户再次开始滚动则停止）。

问题：
如何在不滚动的空闲时间后启动计时器？

PLNKR

Answer 1

您可以使用debounceTime 无需滚动即可检测经期。

const scroll = Rx.Observable.fromEvent(window, 'scroll')
  .throttleTime(300)
  .mapTo(false);
const noscroll = Rx.Observable.fromEvent(window, 'scroll')
  .startWith(0) // init with no scroll.
  .debounceTime(300) // detect no scroll after 300 ms.
  .mapTo(true);
scroll.merge(noscroll)
  .switchMap(e => e ? Rx.Observable.interval(1000).mapTo("Tick!") : Rx.Observable.of("Scroll!"))  
  // start the interval if there was no scroll. Stop the interval if there was a scroll.
  .subscribe(updateTimer)

您的代码的另一个问题是使用merge，这将使两个源都被订阅，而不是我使用switchMap（mergeMap 的兄弟），它将在每次发出新事件时订阅内部可观察对象，但是如果从源发出另一个事件，也会取消订阅先前的内部源。

回复：问题的“另一个 POV”部分：您可以将 switchMap 中的 Rx.Observable.interval(1000) 替换为工作。滚动将取消/取消订阅作业（因为发出了empty），如果不再滚动，作业将重新开始。

Live demo

Answer 2

我会这样做：

const scroll$ = Rx.Observable.fromEvent(window, 'scroll')
    .throttleTime(300 /* ms */)
    .publish();

scroll$.connect();

const subscriber = scroll$
    .map(() => 'throttle')
    .race(Rx.Observable.interval(1000).map(() => 'tick'))
    .take(1)
    .repeat()
    .subscribe(
        (x) => {
          console.log('Next: event!', x);
        },
        (err) => {
          console.log('Error: %s', err);
        },
        () => {
          console.log('Completed');
        });

这使用race() 运算符仅订阅首先发出的Observable，即1s interval 或滚动事件。之后我想用另一个间隔重新开始，所以我使用take(1).repeat()。

我还必须将 scroll$ Observable 转换为热门 Observable 以保持 throttleTime() 在重复订阅中运行。

您更新的演示：https://plnkr.co/edit/sWzSm32uoOQ1hOKigo4s?p=preview