Detection of hover more than specified seconds with RxJS
Using RxJS, this entry intends similarly with a jQuery plugin, hoverIntent, aiming to detect hover event but doesn't immediately fire the event. It fires hover event if the mouse cursor has stayed on a point after specified milli seconds.
This uses three kinds of streams for mouse events, mouseenter, mouseleave and mousemove.
-
enteredstream expresses a flag whether the mouse cursor is in areas to detect hover events. It can be generated to mergemouseenterandmouseleavesimply mapping to boolean. -
Combine
movestream with the flag stream and debounce the move events with a duration (500 milli seconds in the below example).debouncedoesn't fire any events while mouse is moving, so it prevents the stream from firing mouse move event. -
The rest is easy to understand, just filter all evenths with
falseflag.
Here is an example. It would be helpful for me if you could tell me another way to do the same thing.
