rxjs 缓冲区不能像我预期的那样与油门一起工作答案

【问题标题】：rxjs buffer doesn't work with throttle as expected for merxjs 缓冲区不能像我预期的那样与油门一起工作
【发布时间】：2017-06-09 09:54:19
【问题描述】：

我正在尝试基于节流排放创建缓冲排放。以下在 RxJs 2 中按预期工作：

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

full jsfiddle example here

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

未捕获的类型错误：您在预期流的位置提供了 '() => 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))

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

未捕获的类型错误：this.durationSelector 不是函数

你能帮我理解这是错的吗？

【问题讨论】：

使用throttleTime 而不是throttle
.buffer(clickStream.throttleTime(250)) 应该可以完成这项工作。

标签： javascript rxjs rxjs5

【解决方案1】：

您的问题在于 RxJs5 是完全重写的，并且有很多重大更改。其中包括重命名运算符或将运算符重载拆分为不同的运算符。

.throttle() 引发了您的错误，它在 RxJs5 中采用一个函数在缓冲区应该关闭时返回一个 Observable。您正在寻找的重载已在 RxJs5 中重命名为 .throttleTime()

最好不要因为这个原因混淆不同版本的 Rx。如果您打算开始使用 RxJs5，请查看migration guide，让您了解具体情况。

【讨论】：

【解决方案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);
}))

【讨论】：