使用angular 2 + Typescript时，如何限制RxJs中的mousemove事件？

Question

我正在学习RxJ。我使用Angular2 rc3。以下流有效，但是它给了我太多的mousemove事件。我想使用时间（节流）或其他控制流来减慢它们的速度。我怎样才能做到这一点？

鼠标移动流而无节流

const mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove');

mouseMove$.subscribe( x => console.log(x)); // works great, many {mouse position object} 's

简单的解决方案：使用节流应该是这样的：

const mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove');
const latestMouseEventEvery1Second$ = mouseMove$.sample(1000);

latestMouseEventEvery1Second$.subscribe( x => console.log(x)); // error

- 我在这里采用了这个sample（）运算符的形式：http：//reactivex.io/documentation/operators/sample.html

但这在角度2-CLI项目中不起作用。给我这个错误：

***Argument of type 'number' is not assignable to parameter of type 'Observable<\any>'*** - notice i've put <\MouseEvent> when casting.

我认为，实现相同结果的另一种更强大的方法可能是顺其自然： 如果我们可以mousemove item 根据从另一流接收到的项目发送最新消息，那将是很好的。任何流-由我们创建。

例如：

当我们从eachSecond$Stream（=我们的“控制流”）接收到一个新项目（1、2,3 ..）时，-我们发出donwstream（进入mouseMoveEachSecond$）-从mouseMove$stream中接收到的最新项目。

const eachSecond$ = Observable.timer(0, 1000); // starts at 0 and gives 1,2,3 as values each 1000 milliseconds.
const mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove');

const mouseMoveEachSecond$ = Observable.merge(eachSecond$,mouseMove$)
  .some magic operator I can't find()
  // this could work like this:
    // many mouse items are coming at a high rate from the mouse stream
    // only a few items (1,2,3..) are coming form the eachSecond$ stream
    //the logic: We send downstream **only one mouse item** (the last) for each new item that is coming form the eachSecond$ stream.
);

mouseMoveEachSecond$.subscribe( x => console.log(x)); 
// a { mouse position object } = mouse item - only when you move the mouse 
// and no more than one {mouse position object} per second}

声音很简单。我发现这特别难以实现-从我可以告诉我的是，这是因为应该以某种方式共享流的状态。需要一种方法来告知已经发送的内容。

在mouseMoveEachSecond $中，项按顺序一个接一个地排列。或数字或对象。你得知道：

• time item当您收到新的邮件时，这是最后一次mouse item。
• mouse item当您收到新的邮件时，这是最后一次time item。

这将使您能够：

• mouse item当鼠标不在屏幕上移动时，不发送下游消息。
• mouse item当time itemeachSecond $流没有新发布的消息时，不发送下游消息。

这可以使用全局变量来完成。但是不是RxJS的处理方式。我不知道一种存储上次发送的项目并在下一步中使用它的方法。Reduce运算符可以保持状态：从一个项目发布-到另一个项目，但是我们如何使用该属性实现此行为？此流必须视为无限。嗯...应该是合并这两个流的更简单的方法..也许还为时过早..我觉得我的大脑不想在流中进行思考:)

因此，以下两个问题很明确：

1. 有哪些方法可以限制Angle2中的mousemove流？
2. 我可以使用另一个流来控制何时释放mousemove项目吗？如果是，此“控制流”可以是任何流，还是有限制？

非常感谢：）

Answer 1

你好亲近！具有讽刺意味的是，你的魔术师是 sample。

示例的旧变体（来自RxJS4）已重载，并且可以将数字作为其参数。在RxJS5（Angular2附带的那个）中，它已被拆分，因此实际上有两个运算符sample和sampleTime。后者是一个带有时间参数的参数，当它发出时，它在给定的时间范围内接受最后一个事件。

const mouseMoveEachSecond$ = mouseMove$.sampleTime(1000);

前者将an Observable作为唯一参数，并在每次Observable发出控件时发出接收到的最后一项。

即

const eachSecond$ = Observable.timer(0, 1000); // starts at 0 and gives 1,2,3 as values each 1000 milliseconds.
const mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove');

const mouseMoveEachSecond$ = mouseMove$.sample(eachSecond$);

mouseMoveEachSecond$.subscribe( x => console.log(x));