setTimeout 函数未在第一次 mouseenter / hover 时触发答案

【问题标题】：setTimeout function not triggering on first mouseenter / hoversetTimeout 函数未在第一次 mouseenter / hover 时触发
【发布时间】：2015-08-19 07:58:25
【问题描述】：

概述： 当您将鼠标悬停在具有“showhim”类的列表项上时，我正在创建一个显示 div“showme”的菜单。我想要在列表项之间切换时有延迟，所以我包含了一个 setTimeout 函数。

问题： setTimeout 函数未在第一个 mouseenter 事件上触发。如果我删除 setTimeout 函数，则 mouseenter 事件可以正常工作。鼠标进入

试过了： 我试过 mouseover 和 mouseout 看看它是否会有所作为。如果我将鼠标放在跨度（菜单项名称）上，setTimeout 函数将触发。

另外，当我在最上面的父 div 上放置一个边框并在进入“showhim”之前将鼠标悬停在边框上时，会触发 setTimeout 函数并且菜单可以正常工作。我不知道为什么边框会起作用..

// 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>

【问题讨论】：

旁注：该 HTML 无效。 li 不能是除 template、ul 和 ol 之外的任何东西的直接子代。
我已将您引用的代码转换为问题中的堆栈片段，进行了必要的绝对最小更改（定义 isHomepage 和 isMobile 并在 .showme 中显示一些内容）。在 sn-p 中工作，问题出在其他地方（也许在那个变量和函数中？）。这就是创建真正的MCVE 的优势。
感谢您的意见。我解决了这个问题并用解决方案更新了原始帖子。问题出在计时器变量上。
答案不在问题中。回答您自己的问题很好，但您必须通过发布 answer 来回答。请参阅tour 和help center 了解更多信息。但由于这不太可能在将来帮助其他任何人，我只会使用它下面的“删除”链接。

标签： javascript jquery html mouseevent jquery-hover

【解决方案1】：

已解决： 我有 2 个 setTimeout 函数引用同一个计时器变量。

我所做的只是创建另一个计时器并且悬停正常工作。

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);
}

【讨论】：