javascript - setTimeout function not triggering on first mouseenter / hover -

overview: creating menu shows div 'showme' when hover on list item class 'showhim'. want delay when switching between list item included settimeout function.

problem: settimeout function not being triggered on first mouseenter event. if remove settimeout function mouseenter event works fine. mouseenter

tried: i've tried mouseover , mouseout see if make difference. if put mouse on span (the menu item name) settimeout function trigger.

also, when put border on top parent div , hover on border before entering 'showhim', settimeout function triggered , menu works fine. have no clue why border make work..

// fake these 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 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 on 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 first time when hovering on 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>

solved: had 2 settimeout functions referencing same timer variable.

all did create timer , hover worked properly.

var timer; // settimeout menu close  var timer2; // settimeout showhim   // timer 2 $('.showhim').mouseenter(function() {    //      }, showhim_timeout); }).mouseleave(function() {     cleartimeout(timer2); });   // timer 1 function timeoutmenu() {     timer = settimeout(function() {         close();     }, menu_timeout);  }  function stoptimeout() {     cleartimeout(timer); }