Double clicks

HTML

<div class="container">
    <div class="header">
         <a href="#" class="this">BUTTON</a><h2>Double click it</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

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

// Rx rocks :)
var multiClickStream = clickStream
    .map(function() { return 1; })
    .merge(
        clickStream
        .throttle(200)
        .map(function() { return 0; })
    )
    .scan(function(acc, current) { 
        if (current === 0) return 0;
        else return acc+current;
    })
    .filter(function(x) { return x >= 1; });

// Listen to the stream and render the text label accordingly
multiClickStream
    .subscribe(function (numclicks) {
        document.querySelector('h2').textContent = ''+numclicks+'x click';
    });
multiClickStream
    .throttle(1000)
    .subscribe(function(x) {
        document.querySelector('h2').textContent = '';
    });