Rxjs - 计算在div内部/外部花费的时间

我正在学习Rxjs，想试试我自己的几个例子，但我似乎无法让我的脑袋思考被动。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));

我能计算时间，但我怎么也涉及到相应的输入/输出流？我所要的输出看起来像：

里面， - 外30
，在 - - 20，出20，出 - 35
里面， - 100，出 - 35

另外，有人可以指点我可以做的一些例子，这样我就可以开始思考被动范式吗？

来源

2017-05-04 Ishan Soni

官方文档中有一些示例（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))

这-event它开始听mouseleaves开始听在$，然后在一个mouseenter，采取这些事件1计算持续时间。

为了清楚起见，我已经为彼此写下了多个地图，但是当然您可以将其组合成一个函数。

来源

2017-05-04 10:22:24 Herman

从Rx开始时，我发现最具挑战性的事情之一是使用流的流，并且变得适应flatMap和switchMap。您所描述的问题使用这种方法最容易解决。有了您的流定义如下（我更喜欢const了let要清楚无突变是发生）：

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());

（注意：有一个timestamp方法rxjs你可以使用，而不是手动这样做，但我觉得这更好的说明了如何映射您的流元素变成任何你喜欢的东西）。

从这里，我们可以调整我们的switchMap使用访问进出这两个值，并返回它们之间的区别：

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

这里是整个事情的工作：

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

来源

2017-05-04 10:18:06

Rxjs - 计算在div内部/外部花费的时间

回答

相关问题