How to throttle a mousemove event in RxJs when using angular 2 + Typescript?
<p>I'm in the process of learning RxJs. I use Angular2 rc3.
The following stream works, but it gives me <strong>too many mousemove events</strong>. I want to slow them down using time(throttling) or another control stream. 
How can i do that? </p>

<p>Mouse move Stream without throttling</p>

<pre><code>const mouseMove$ = Observable.fromEvent&lt;MouseEvent&gt;(document, 'mousemove');

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

<p>Simple solution: Using throttling should be something like this:</p>

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

latestMouseEventEvery1Second$.subscribe( x =&gt; console.log(x)); // error
</code></pre>

<p>- this <strong>sample() operator</strong> i've taken form here: <a href="http://reactivex.io/documentation/operators/sample.html" rel="nofollow">http://reactivex.io/documentation/operators/sample.html</a></p>

<p>But this does not work in angular 2 - CLI project.
Gives me this error: </p>

<pre><code>***Argument of type 'number' is not assignable to parameter of type 'Observable&lt;\any&gt;'*** - notice i've put &lt;\MouseEvent&gt; when casting.
</code></pre>

<p><strong>Another more powerful way to achieve the same result, i think can be the flowing:</strong>
It will be great if we can send the latest <code>mousemove item</code> <strong>based on the items received from another stream</strong>. Any stream - created by us.. </p>

<p>For example: </p>

<p>When we receive a new item(1, 2,3..) from the <code>eachSecond$</code> Stream ( = our "Control Stream"), - we emit donwstream (into the <code>mouseMoveEachSecond$</code>) - the latest item received from <code>mouseMove$</code> stream.</p>

<pre><code>const eachSecond$ = Observable.timer(0, 1000); // starts at 0 and gives 1,2,3 as values each 1000 milliseconds.
const mouseMove$ = Observable.fromEvent&lt;MouseEvent&gt;(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 =&gt; 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}
</code></pre>

<p>Sound's simple. I found this particularly hard to implement - form what i can tell, this is because  the state of the stream should be shared somehow. A way to tell what was already been sent is needed..</p>

<p>In the mouseMoveEachSecond$ the items are coming one by one, in sequence. Or a number or an object. You need to know: </p>

<ul>
<li>Which was the last <code>time item</code> when you receive a new <code>mouse item</code>. </li>
<li>And which was the last <code>mouse item</code> when you receive a new <code>time item</code>.</li>
</ul>

<p>This will enables you to:</p>

<ul>
<li>not send a <code>mouse item</code> downstream when the mouse doesn't move on the screen.</li>
<li>not send a <code>mouse item</code> downstream while there is no new <code>time item</code> released form the eachSecond$ stream.</li>
</ul>

<p>This can be done using global variables. But is not the RxJS way of doing things.. I don't know of a way to store the last sent item and use it in the next step. Reduce operator can keep the state:  from one item released - to another, but how we can use that property to achieve this behavior? This streams must be considered infinite. Hmm... should be simpler way to combine this 2 streams.. Maybe is too early.. I feel that my brain doesn't want to think in Streams :)</p>

<p>So the 2 questions laid clear:</p>

<ol>
<li>which are some ways to throttle a mousemove Stream in angular 2?</li>
<li>can i use another stream to control when i release the mousemove items? If yes, this "Control Stream" can be any stream, or there are limitations?</li>
</ol>

<p>Thank you so much:)</p>