Double clicks

HTML

<div class="container">
    <div class="header">
         <a href="#" class="this">BUTTON (click me)</a><h2></h2>
    </div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.async.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.coincidence.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.binding.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.time.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js"></script>

CSS

body {
    font-family: sans-serif;
    padding: 10px;
}
h2 {
    font-weight: bold;
    display: inline-block;
    margin-left: 20px;
}
.header {
    background: #ECECEC;
    padding: 5px;
}

JavaScript

function createItem(num) {
  var elem = document.createElement("span");
  elem.textContent = num  + 'x clicks ';
  return elem;
}

// Make the raw clicks stream
var button = document.querySelector('.this');
var clickStream = Rx.Observable.fromEvent(button, 'click');
var h2elem = document.querySelector('h2');


var multiClickStream = clickStream
    .buffer(function() { return Rx.Observable.interval(660)})
    .map(function(list) { return list.length; })
    .filter(function(x) { return x >= 2; });

// Same as above, but detects single clicks
var singleClickStream = clickStream
    .buffer(function() { return clickStream.throttle(250); })
    .map(function(list) { return list.length; })
    .filter(function(x) { return x === 1; });

// Listen to both streams and render the text label accordingly
singleClickStream.subscribe(function (event) {
   h2elem.appendChild(createItem(1));
});
multiClickStream.subscribe(function (numclicks) {
    h2elem.appendChild(createItem(numclicks));
});
Rx.Observable.merge(singleClickStream, multiClickStream)
    .delay(3000)
    .subscribe(function (suggestion) {
        h2elem.removeChild(h2elem.firstChild);
    });