javascript - 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"(我应该只看到“throttle”)

从另一个 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