title: RXjs canceling debounce from source
body: <p>I'm learning Rx so i dont get quiet well some of the mechanics on Rx, what i want to do i can do it easly with callbacks, but i want to understand Rx.</p>
  
  <p>So what i want to do is, debounce a mouse over event 500ms and show a ui interface, and on mouse out hide that interface, so i have this code:</p>
  
  <pre><code>var outStream = Rx.Observable.fromEventPattern(
            function add (h) {
              asset.events.onInputOut.add(function(){
                  h('out');
              });
            }
          );
  
          var overStream = Rx.Observable.fromEventPattern(
            function add (h) {
              asset.events.onInputOver.add(function(e){
                  h('over');
              });
            }
          ).debounce(500);
  
  
          var source = Rx.Observable.merge(overStream, outStream);
  
          source.subscribe(function (x) {
              console.log(x);
            });
  </code></pre>
  
  <p>What i want is something like this:</p>
  
  <pre><code>.
  .mouse over fired after 500ms
  .mouseout
  .
  .mouse over
  .mouse out fired before 500ms trigger cancel mouse over
  </code></pre>
  
  <p>I need some directions, thanks in advance.</p>