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
.
-
entered
stream expresses a flag whether the mouse cursor is in areas to detect hover events. It can be generated to mergemouseenter
andmouseleave
simply mapping to boolean. -
Combine
move
stream with the flag stream and debounce the move events with a duration (500 milli seconds in the below example).debounce
doesn'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
false
flag.
Here is an example. It would be helpful for me if you could tell me another way to do the same thing.