Hover intent — меню без случайных открытий

Паттерн

Mega-menu, tooltip, popover на hover. Открываются не моментально, а через короткую задержку — чтобы при быстром пролёте курсора через область они НЕ открывались. Только при намеренной задержке мыши.

Какую проблему решаем

Императивный setTimeout(open, 200) на mouseenter без правильного clearTimeout на mouseleave — меню откроется даже после того, как пользователь уже ушёл с области. Это раздражает.

Операторы и зачем они нужны

• switchMap(() => timer(N)) — на каждый mouseenter создаём новый timer. Новый enter отменяет предыдущий.
• timer(N) — задержка перед открытием.
• takeUntil(mouseLeave$) — если за это время курсор ушёл, timer отменяется. Меню не откроется.
• mapTo('open') — успешное срабатывание timer = команда открыть.

Подводные камни

• delay без takeUntil — меню откроется даже после mouseleave. Классическая ошибка.
• mergeMap — каждый mouseenter создаст параллельный timer. При быстрых движениях курсора получите кучу одновременных open.
• Слишком большая задержка (>300мс) — меню кажется сломанным. Пользователь думает, что hover не работает.