Question

我正在尝试根据节流发射创建缓冲发射。以下在 RxJs 2 ：

中按预期工作

.buffer(function() { return clickStream.throttle(250); })

full jsfiddle example here

但是当我尝试在我的本地项目中使用它时，它会返回以下错误：

未捕获的TypeError：您提供了'（）=＆gt; clickStream.throttle（250）'在哪里有一个流。您可以提供Observable，Promise，Array或Iterable。

这是我的代码

import Rx from 'rxjs/Rx';

const $button = document.getElementById('button');
const $label = document.getElementById('label');

const clickStream = Rx.Observable.fromEvent($button, 'click');

const doubleClickStream = clickStream
  .buffer(() => clickStream.throttle(250))
  .map(arr => arr.length)
  .filter(len => len === 2)

clickStream.subscribe(x=>console.log(x));

doubleClickStream
  .subscribe(() => $label.textContent = 'double click')
//
doubleClickStream
  .throttle(1000)
  .subscribe(() => $label.textContent = '-')

我知道我目前对这个库的了解还不够，也许它与rxjs版本有关（在工作示例中它是2.x，在我的代码中它是5.x）。

我也试着把它写成：

.buffer(clickStream.throttle(250))

点击按钮后又引发了另一个异常：

未捕获的TypeError：this.durationSelector不是函数

你能帮我理解它的错吗？

Answer 1

你的问题在于RxJs5是一个完全重写并且有很多重大变化的事实。其中许多是重命名运算符或在不同的运算符中拆分运算符重载。

您的错误由.throttle()引发，当缓冲区应该关闭时，RxJs5中的函数会返回一个Observable函数。您要查找的重载已在RxJs5中重命名为.throttleTime()

出于这个原因，最好不要混用不同版本的Rx。如果您打算开始使用RxJs5，请查看migration guide以了解其中的位置。

Answer 2

这就是我在 RxJs5.5

中实现这一目标的方式

import { buffer, throttleTime, map, filter } from "rxjs/operators";

const clickStream = Observable.fromEvent(button$, 'click');
this.subscriptions.add(clickStream
  .pipe(
      buffer(clickStream.pipe(throttleTime(500))),
      map(arr => arr.length),
      filter(len => len === 4)
    )
  .subscribe(resp => {
    console.log('clicked', resp);
}))

rxjs缓冲区不能像我预期的那样使用油门

2 个答案: