RxJS计算鼠标悬停按钮多长时间

Question

每当有人将鼠标悬停在按钮上时，我都能够登录到控制台，但是我怎么可能发生这几秒钟并汇总总数呢？

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

Answer 1

如果我正确地理解了您的要求，则需要检查鼠标何时也离开了元素，然后使用和运算符（如scan对总数求和。 一个相对简单的方法是获取mouseover的时间戳，然后对mouseout事件进行采样：

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

这是我想出的另一种解决方案，不是最佳方案，但值得分享。

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