setTimeout函数在第一次鼠标输入/悬停时未触发

setTimeout function not triggering on first mouseenter / hover

本文关键字：悬停 输入 函数 第一次 鼠标 setTimeout      更新时间：2023-09-26

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

问题：没有在第一个mouseenter事件上触发setTimeout函数。如果我删除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>

已解决：我有两个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);
}
相关文章：