RxJS - 油门后的去抖事件?

时间:2017-03-31 21:34:11

标签: javascript rxjs

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

所以我有这样的事情:

 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)....

但我只看到了去抖动事件。

问题

如何使用油门并在油门结束时附加去抖动?

2 个答案:

答案 0 :(得分:7)

您可以合并两个流:使用merge将节流和去抖动合并为一个。 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');
          });

答案 1 :(得分:1)

这是由于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');
    }
  );