Determine the duration of hovering over a button using RxJS

Question

Determine the duration of hovering over a button using RxJS

Is it possible to track the total duration, in seconds, of each time a user hovers over a button? How can this information be aggregated and displayed?

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

javascript rxjs

Answer 1

Answer №1

Based on my understanding of your needs, you will have to monitor both the mouse entering and leaving the element, then utilize an operator like scan to calculate the total time. One way to achieve this is by capturing the timestamp of the mouseover event and then sampling on the mouseout event:

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

mouseOver
  //Record the time when mouseover occurs
  .timestamp()
  //Wait for mouseOut event to trigger
  .sample(mouseOut)
  //Retrieve only the timestamp value
  .pluck('timestamp')
  //Obtain a new timestamp (after mouse out)
  .timestamp()
  //Calculate the time interval
  .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

Based on my understanding of your needs, you will have to monitor both the mouse entering and leaving the element, then utilize an operator like scan to calculate the total time. One way to achieve this is by capturing the timestamp of the mouseover event and then sampling on the mouseout event:

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

mouseOver
  //Record the time when mouseover occurs
  .timestamp()
  //Wait for mouseOut event to trigger
  .sample(mouseOut)
  //Retrieve only the timestamp value
  .pluck('timestamp')
  //Obtain a new timestamp (after mouse out)
  .timestamp()
  //Calculate the time interval
  .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 3

Answer №2

I devised an alternative approach that may not be the most efficient, but I believe it's worth sharing for its unique technique.

let counter = 0;

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

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

let hover = false;

const mouseOver = Rx.Observable.fromEvent(toggle, "mouseenter")
  .map(e => {hover=true;});
const 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});

Answer 4

I devised an alternative approach that may not be the most efficient, but I believe it's worth sharing for its unique technique.

let counter = 0;

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

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

let hover = false;

const mouseOver = Rx.Observable.fromEvent(toggle, "mouseenter")
  .map(e => {hover=true;});
const 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});

Determine the duration of hovering over a button using RxJS

Answer №1

Answer №2

Similar questions

The fetch request in a React application is not returning a response body, whereas the same request functions properly when made using Postman

I am struggling to retrieve a value from the angular.forEach function, the flag value is not being obtained. What could be

Struggling to grasp the concept of DOM Event Listeners

Using jQuery to create a slider that triggers a separate function

Retrieve the keys stored within a complex array of objects

How can Ext JS 6.2 automatically expand the East panel when the West panel is triggered?

Exploring Recursive Types in TypeScript

Having trouble importing SVG as a React component in Next.js

Issue with Date Picker not properly storing selected date in MySQL database

Utilizing JQuery to extract the image title and render it as HTML code

Unable to invoke function on HTML element

Error message: "Function is not defined"

The functionality of ng-show becomes compromised when used in conjunction with ng-animate

Chrome compatibility problem with scroll spy feature in Bootstrap 3

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Tips for incorporating a favicon in a React application

Using Array.Map() to retrieve the child array within a React component

Enhancing WooCommerce by including additional text following the price for specific shipping methods

Is there a way to attach a JavaScript event to a textarea without directly accessing it?

What could be causing the peculiar behavior I am experiencing when a child component attempts to display values from an object fetched in the parent component?