Rxjs - 部門内/外で費やされた時間を計算する

Question

私はRxjsを勉強していて、自分ででいくつかの例を試してみたかったのですが、私の頭の中に反応的に考えることはできません。

ユーザーのマウスポインタがdivの内側と外側に費やす時間を計算しようとしています。私は時間を計算することができていますが、どのように私はそれぞれのイン/アウトのストリームにそれを関連していますhttps://jsfiddle.net/ishansoni22/44af3n3k/

<div class = "space"> 
<div> 

let $space = $(".space") 

let in$ = Rx.Observable.fromEvent($space, "mouseenter") 
         .map((event) => "in") 
let out$ = Rx.Observable.fromEvent($space, "mouseleave")          
         .map((event) => "out") 

let inOut$ = Rx.Observable.merge(in$, out$) 

let time$ = Rx.Observable.interval(1000) 
        .buffer(inOut$) 
        .map((list) => list.length) 

time$.subscribe((value) => console.log(value)); 

- ？

はフィドルを見ますかうち、100 - - うち、20 - - 30

を外に - 20、アウト - 35

を内側にして、

• 内部35
：私は、出力は次のようになりたいです

また、反応のパラダイムで考えることができるように、私ができるいくつかの例を教えてもらえますか？

Answer 1

：

const inThenOut$ = in$.switchMap(() => out$, (x, y) => y - x); 

ここで全部の作業だが

公式文書（http://reactivex.io/rxjs）にいくつかの例がありますが、実際は少し不足しています。

私はいくつかのあなたのサンプルと思う

このような何か：これは$でを聞いて開始する

let $space = $(".space") 
let in$ = Rx.Observable.fromEvent($space, "mouseenter") 
let out$ = Rx.Observable.fromEvent($space, "mouseleave") 

let durations$ = in$ 
    .map(_ => Date.now()) 
    .switchMap(inTime => out$ 
    .take(1) 
    .map(_ => Date.now()) 
    .map(outTime => outTime - inTime) 
) 

durations$ 
    .scan((sum, next) => sum + next, 0) 
    .subscribe(total => console.log(total)) 

、それはmouseleavesを聞くために開始しmouseenter -event時に、これらのイベントの1を取り、期間を計算します。

わかりやすくするために、複数のマップを下に書きましたが、もちろんそのマップを1つの関数にまとめることができます。

Answer 2

Rxで始まるときに最も気に入ったことの1つは、ストリームのストリームを使用していて、flatMapとswitchMapで快適になっていたことの1つです。あなたが記述する問題は、このアプローチを使って最も簡単に解決されます。あなたのストリームが定義されたと（私は変異がoccuringされていないことを明確にするためにlet上constを好む）を次のように

const in$ = Rx.Observable.fromEvent($space, 'mouseenter'); 
const out$ = Rx.Observable.fromEvent($space, 'mouseleave'); 

次のように入力して、次のように残して記述することができます。

const inThenOut$ = in$.switchMap(() => out$); 

正確に何を理解するためにこれは、flatMapについて学び、ストリームのストリームに慣れてから、switchMapが最も最近の内部ストリームへのサブスクリプションを維持することによってどのように機能するかを学ぶよう促します。このため、私は公式のrxjsドキュメントが最良のソースであることを発見しました。付属の大理石図は、しばしば少数の点と線で複雑な物語を伝えます。

ここから、内部で過ごす時間は比較的短いです。まず、我々は、タイムスタンプ値に独自のストリームをマップ：

const timestamp =() => + new Date(); 
const in$ = Rx.Observable.fromEvent($space, 'mouseenter').map(() => timestamp()); 
const out$ = Rx.Observable.fromEvent($space, 'mouseleave').map(() => timestamp()); 

（注意：そこに手動でこれを行うのではなく、使用することができrxjsでtimestamp方法があるが、私はこれより良いあなたはあなたのストリーム要素をマッピングする方法を示し感じあなたが何かにしてください）。

そこから、我々は内と外の両方の値にアクセスするために私たちのswitchMap使用量を調整し、その差を返すことができます。

https://jsbin.com/qoruyoluho/edit?js,console,output