RxJS - debounce event after throttle?

Question

I let the user scroll the page in every scroll event - I check if there are new elements in the viewport (if there are, I do some operation on these new elements - it doesn’t matter now).

So, I have something like this:

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

This code works as expected, and I see a message every 300 ms.

But there is a problem. The user can scroll without executing 300 ms (the event will not be raised), and the new element became visible during scrolling.

Here I need a method debounce. (which means "after X ms the last time of the event - raise the event")

This is exactly what I need.

I tried this :

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

But I see only unlocked events.

Question

- debounce?

Answer 1

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