RxJS zählen, wie lange über Schaltfläche

Question

Ich kann auf der Konsole jedes Mal anmelden, wenn jemand über eine Schaltfläche schwebt, aber wie könnte ich könnte, wie viele Sekunden das passiert und aggregiert die Summe?

var result = document.getElementById('result'); 
var source = Rx.Observable.fromEvent(result, 'mouseover'); 
var subscription = source.subscribe(
    function (x) { 
    console.log('Hovered!'); 
    } 
); 

Answer 1

Wenn ich richtig Ihre Anforderungen am Verständnis, Sie müßten zu überprüfen, wenn die Maus auch das Element verläßt als gut, und dann verwenden und Betreiber wie scan die Gesamt zu summieren. Eine relativ einfache Möglichkeit, dies zu tun wäre, um einen Zeitstempel der mouseover und dann auf dem mouseout Abtastereigniszähler:

var result = document.getElementById('result'); 
var mouseOver = Rx.Observable.fromEvent(result, 'mouseover'); 
var mouseOut = Rx.Observable.fromEvent(result, 'mouseout'); 

mouseOver 
    //Get the time of the mouseover event 
    .timestamp() 
    //Don't emit until the mouseOut triggers 
    .sample(mouseOut) 
    //Extract only the timestamp value 
    .pluck('timestamp') 
    //Get a new timestamp (remember this is *after* mouse out) 
    .timestamp() 
    //Compute the timeinterval 
    .map(x => x.timestamp - x.value) 
//Add the new time interval to the running total 
.scan((total, diff) => total += diff, 0) 
.subscribe(x => console.log(x)); 

Answer 2

Dies ist eine alternative Lösung, die ich für die Technik mit, nicht optimal, aber es wert kam.

var counter = 0; 

var source = Rx.Observable.interval(100) 
    .map(() => '.'); 

var display = document.querySelector("#display"); 
var toggle = document.querySelector("#toggle"); 

var hover = false; 

var mouseOver = Rx.Observable.fromEvent(toggle, "mouseenter") 
    .map(e => {hover=true;}); 
var mouseOut = Rx.Observable.fromEvent(toggle, "mouseleave") 
    .map(e => {hover=false;}); 

mouseOver //.filter(x => true) 
    .flatMapLatest(() => source.takeUntil(mouseOut)) 
    .subscribe(x => {counter += 1; display.innerText = counter});