41201


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

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

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

[code]

     input:---a-------b---c--d---------e--->
              |       |                |
    output:---a-------b----c----d------e--->
    
[/code]

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

[code]

    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'))
    
[/code]

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

[code]

        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---->
    
[/code]

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


CC BY-SA 3.0
2017-08-01T02:37:15.073
36832
2018-01-25T07:44:09.757
2017-08-01T02:57:35.153
24674
24674
question
javascript rx-javascript
RxJS v5.4.2 throttleTimeのようなことをしたい


こんな感じでどうでしょうか。

[code]

    const btn = document.querySelector('.btn')
    const result = document.querySelector('#result')
    
    const clickStream = Rx.Observable.fromEvent(btn, 'click')
    
    clickStream
      .concatMap((e, i) => 
        Rx.Observable.of(i).concat(Rx.Observable.empty().delay(500)))
      .subscribe(function(v) {
        result.value += v + " "
      });
      
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.min.js"></script>
    <button class="btn">CLICK</button>
    <br>
    <textarea id="result"></textarea>
[/code]

`Rx.Observable.of(i).concat(Rx.Observable.empty().delay(500))`は、即座に`i`をemitして`500`ms後にcompleteするような`Observable`です。これを`concatMap`することで、出力の間隔は少なくとも`500`msあることが保証されます。


CC BY-SA 3.0
2018-01-25T07:10:22.923
41201
2018-01-25T07:44:09.757
2018-01-25T07:44:09.757
20206
20206
36832
answer