如何发出每个第n个值？

Question

我正在使用mousemove事件来创建一个observable.

Observable.fromEvent(document, 'mousemove')

我需要每10次发射一次.我该怎么办？

Answer 1

我可以想到四种不同的方法:

bufferCount()

Observable.range(1, 55)
  .bufferCount(10)
  .map(arr => arr[arr.length - 1])
  .subscribe(val => console.log(val));

windowCount()

Observable.range(1, 55)
  .windowCount(10)
  .switchMap(window => window.takeLast(1))
  .subscribe(val => console.log(val));

反跳()

let source = Observable.range(1, 55).publish();

source
  .debounce(val => debounceNotifier)
  .subscribe(val => console.log(val));

let debounceNotifier = source
  .bufferCount(10)
  .publish();
debounceNotifier.connect();

source.connect();

扫描()

Observable.range(1, 55)
  .scan((acc, val) => {
    if (acc.length === 10) {
      acc = [];
    }
    acc.push(val);
    return acc;
  }, [])
  .filter(acc => acc.length === 10)
  .map(acc => acc[acc.length - 1])
  .subscribe(val => console.log(val));

但是,使用scan()它时将丢弃最后一个值55.

查看所有这些的演示:https://jsbin.com/yagayot/14/edit？js,console

Answer 2

这是我使用 RxJS 6 测试的一种更简单且速度更快的方法：

range(1, 10000000)
  .pipe(
    filter(function(value, index) { 
      return index % 10 === 0; 
    }),
  );

此代码的速度是另一个答案中的bufferCount和windowCount方法的两倍：https : //jsperf.com/observable-nth/1

这可能是因为filter操作员使用了一个简单的计数器，而不必保留最后一个n元素的缓冲区。我认为这在n更大或元素本身更大时会更快。使用 RxJS 6，您还可以轻松地将其变成您自己的自定义运算符：

const takeEveryNth = (n: number) => filter((value, index) => index % n === 0);
// usage: rxjs.range(1, 10000000).pipe(takeEveryNth(10));

它也是解释如何创建自定义操作符的官方文档中使用的代码：https : //github.com/ReactiveX/rxjs/blob/6.2.2/doc/pipeable-operators.md