title: How to throttle a mousemove event in RxJs when using angular 2 + Typescript?
body: <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>