RxJS v5.4.2を使用しています。(CDNで簡易的に試しています。)

クリックイベントに対応してコンソールに'clicked'という文字列を表示するコードを書いているのですが、一度表示したら0.5秒間は表示しないようにしたいのです。
ここまでであれば.throttleTime(0.5 * 1000)を噛ませればよいのですが、最終的にはクリックした回数と同じ回数表示してほしいのです。

つまり、以下のようなマーブルダイアグラムが理想です。
（これに限らず0.5秒間に1回のみのイベント発火で最終的にはクリックした回数と同じ回数発火という仕様が満たされていれば良いです。）

 input:---a-------b---c--d---------e--->
          |       |                |
output:---a-------b----c----d------e--->

上記マーブルダイアグラムのoutputのc, dの位置をRxJSのコード上でどう表せば良いのか分からなかったので、発想を変えて、0.5秒ごとのインターバルとクリックイベントをzipする以下のようなコードを考えました。

const intervals = Rx.Observable.interval(0.5 * 1000)
const clicks = Rx.Observable.fromEvent(document, 'click')
Rx.Observable.zip(intervals, clicks, (interval, click) => {interval, click})
  .subscribe(() => console.log('clicked'))

これはクリックイベントが十分多いときは上手くワークしたのですが、クリックイベントが枯渇してObservable.interval(0.5 * 1000)のほうが余ってしまうとうまくいきませんでした。
以下は失敗例のマーブルダイアグラムです。

    clicks: ---a-------b---c--d---------e---->
 intervals: 0----1----2----3----4----5----6-->
               |       |   |  |         |
 output(c): ---a-------b---c--d---------e---->
 output(i): ---0-------1---2--3---------4---->

どのように実装するのが自然でしょうか。