Javascript RxJS-油门后的去盎司事件?

Javascript RxJS-油门后的去盎司事件?,javascript,rxjs,Javascript,Rxjs,我允许用户滚动页面,并在每个滚动事件中检查视口中是否有新项目 (如果有的话,我会对这些新项目进行一些操作——暂时不相关) 所以我有这样的想法: const observable = Rx.Observable.fromEvent(window, 'scroll'); const subscriber = observable.throttleTime(300 /* ms */).subscribe( (x) => { console.lo

我允许用户滚动页面,并在每个滚动事件中检查视口中是否有新项目
(如果有的话,我会对这些新项目进行一些操作——暂时不相关)

所以我有这样的想法:

 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 ms之后-引发事件”)

这正是我需要的

:

但我只看到那些没有宣布的事件

问题


如何使用节流阀和节流阀末端-附加一个去盎司?

您可以使用
合并将两个流合并为一个:节流流和去盎司流


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

我认为解决方案将非常接近。检查合并两个流:节流和去公告是否确实适用于您@YuryTarabanko。非常感谢。请将其作为答案发布(如果您愿意)
  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');
          });
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');
    }
  );