setTimeout function not triggering on first mouseenter / hover

Question

Overview: I am creating a menu that shows a div 'showme' when you hover over a list item with class 'showhim'. I want a delay when switching between a list item so I included a setTimeout function.

Problem: The setTimeout function is not being triggered on the first mouseenter event. If I remove the setTimeout function the mouseenter event works fine. mouseenter

Tried: I've tried mouseover and mouseout to see if it would make a difference. If I put my mouse over the span (the menu item name) the setTimeout function would trigger.

Also, when I put a border on the top most parent div and hover over the border before entering the 'showhim', the setTimeout function is triggered and the menu works fine. I have no clue why the border would make it work..

// Fake these for the snippet
var isHomepage = false;
function isMobile() {
    return false;
}
// End of fake
$('.showhim').mouseenter(function() {
  if (!isMobile()) {
    var $this = $(this);
    timer = setTimeout(function() {

      $('.mastermenuitem').removeClass('menu-active');
      $('.mainmenuitem').removeClass('nav-active');
      $('.showme').css('display', 'none');

      // Expand Shop Menu Container
      if (isHomepage && !isMobile()) {
        var corecenter_width = $('#corecenter').innerWidth();
        $('#shop-menu-container').css('width', corecenter_width - (border_width * 2));
      }

      // Add active class to clicked menu item
      $this.find('li').addClass('menu-active');
      $this.find('.showme').css('display', 'block');
      $this.find('.mainmenuitem').addClass('nav-active');
    }, 150);
  }
}).mouseleave(function() {
  clearTimeout(timer);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <!-- setTimeout triggered when hovering over shop-menu-container border -->
<div id="shop-menu-container">
<div class="menu-wrapper">
<div class="showmemaster">
  <div class="showhim-wrapper"> 
    <!-- Trigger Element-->
    <div class="showhim"> 
      <!-- mouseover works the first time when hovering over the span -->
      <ul><li class="mainmenuitem"><span>Menu Item 1</span></li></ul>
      <div class="showme" style="display:none;"> 
        Content 1
      </div>
    </div>

 <div class="showhim"> 
      <ul><li class="mainmenuitem"><span>Menu Item 2</span></li></ul>
      <div class="showme" style="display:none;"> 
        Content 2
      </div>
    </div>
  </div>
</div>

Side note: That HTML is invalid. li cannot be the direct child of anything but template, ul, and ol. — T.J. Crowder
I've turned your quoted code into a Stack Snippet in your question, making the absolute minimum changes necessary (defining isHomepage and isMobile and putting something to show inside the .showme). Works in the snippet, the problem lies elsewhere (perhaps in that variable and function?). This is the advantage of creating a true MCVE. — T.J. Crowder
Thank you for your input. I solved the problem and update the original post with the solution. The problem was with the timer variable. — edinchev
Answers don't go in the question. It's fine to answer your own question, but you must do so by posting an answer. See the tour and the help center for more. But as this is extremely unlikely to help anyone else in the future, I would instead just use the "delete" link under it. — T.J. Crowder

edinchev edinchev · Accepted Answer · 2015-06-04T19:06:01

Solved: I had 2 setTimeout functions that were referencing the same timer variable.

All I did was create another timer and the hover worked properly.

var timer; // setTimeout for Menu Close 
var timer2; // setTimeout for Showhim 

// TIMER 2
$('.showhim').mouseenter(function() {

  // Do something

    }, showhim_timeout);
}).mouseleave(function() {
    clearTimeout(timer2);
});


// TIMER 1
function timeoutMenu() {
    timer = setTimeout(function() {
        close();
    }, menu_timeout);

}

function stopTimeout() {
    clearTimeout(timer);
}

setTimeout function not triggering on first mouseenter / hover

1 Answers