Запустите таймер при наведении мыши и очистите при следующей записи div

Question

Я создаю меню, которое при наведении на unique-link откроет другое меню со ссылками (мегаменю).

Проблема, с которой я столкнулся, заключается в том, что при наведении указателя unique-link якорь, между якорем и div, показанным при наведении курсора, есть зазор.

Чтобы объяснить, вот демо:

$(function() {

    var delay=3000, setTimeoutConst;

    $(".unique-link a").on("mouseenter", function() {
    	setTimeoutConst = setTimeout(function() {
      	$('.showOnHover').addClass('show');
      });

    }).on("mouseleave", function() {
      $('.showOnHover').removeClass('show');
    });
  

});

.menu {
  height: 100px;
  background: lightgrey;
}

.menu .menu__options {
  display: flex;
  align-items: center;
  height: 100%;
}

.menu .menu__options .item {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu .menu__options .item.a {
  background: green;
}

.menu .menu__options .item.b {
  background: red;
}

.showOnHover{
  display: none;
  height: 200px;
  background:blue;
}

.show{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
  <div class="menu__options">
    <div class="item unique-link a">
      <a href="#">Hover me</a>
    </div>
    <div class="item b">
      <a href="#">Link</a>
    </div>
  </div>
</div>

<div class="showOnHover"></div>

В демоверсии вы можете видеть, когда вы наводите курсор мыши на ссылку «hover me» и пытаетесь навести курсор мыши на синий цвет showOnHover div, showOnHover исчезает (что правильно, я хочу, чтобы div показывался только на том, что ссылки привязаны).

Чтобы обойти это, моя игра заключалась в том, чтобы запустить таймер, как только пользователь переходит через unique-link якорь. Я планирую работать следующим образом:

• Пользователь наводит курсор мыши на ссылку "hover me".
• showOnHover div (в этот момент пользователь все еще завис над якорем)
• Если пользователь наводит указатель мыши на ссылку «hover me», а затем перемещает указатель мыши в серую область (в любом месте на menu__options), запустите таймер и включите таймер. showOnHover div будет отображаться до тех пор, пока этот таймер не достигнет 3 секунд.
• Если пользователь наводит курсор мыши на другой тег a, сбросьте таймер (и не отображайте showOnHover div).

Надеюсь, все это имело смысл. Я также продемонстрировал мой текущий подход в приведенном выше фрагменте. Но не могу заставить логи c работать.

Answer 1

Я бы предложил использовать метод debounce loda sh debounce или, возможно, Ben Alman jQuery throttle / debounce , в зависимости от того, что вы предпочитаете.

Таким образом, имея метод debounce (я предполагаю, что loda sh), вы можете реализовать его следующим образом:

var debouncedSetMenuVisible = _.debounce(function(show) {

  if(show)
    $('.showOnHover').addClass('show');
  else
    $('.showOnHover').removeClass('show');

  }, 500);

 $(".unique-link a, .showOnHover").on("mouseenter", function() {
    debouncedSetMenuVisible(true);
 }).on("mouseleave", function() {
    debouncedSetMenuVisible(false);
 });

Это гарантирует, что при возникновении нескольких событий только последний будет выполнен. Также это гарантирует, что это произойдет после указанной вами задержки.

Вы можете использовать отклоненную функцию только для mouseleave, но я бы посоветовал использовать ее для mouseenter, так как она лучше UX (избегайте показа мегаменю для случайное зависание).

edit (еще одна вещь): для showOnHover также требуется указатель мыши и событие отпускания мыши, вызывающее ту же функцию (обновленный код).