Question

我正在建立一个子菜单，方法是将鼠标悬停在主菜单上。

在清理代码之前，它正在正常工作，并且我正在尝试使其顺利运行。

问题是，不管它是否起作用，都是随机的。加载页面并将鼠标导航到悬停区域可以正常工作。但是，然后将其稍微滑动一下，然后来回快速移动就会破坏它。

所以，我猜测它与超时有某种关系，但不确定为什么-可能有更好的方法来实现它吗？

HTML主菜单以及子菜单和JS / Jquery的占位符如下

// Example of menu items
var menuItems1 = [
  '<li><a href="#">Undermeny1 1</a></li>',
  '<li><a href="#">Undermeny1 2</a></li>',
  '<li><a href="#">Undermeny1 3</a></li>',
  '<li><a href="#">Undermeny1 4</a></li>'
];

var inSubMenu = false;
var lastId = "";
$(document).on('mouseenter', '.subMenuHoverArea', function() {

  if ($(this).hasClass('subMenuJS')) {
    var thisid = $(this).attr('id');
  } else {
    thisid = lastId;
  }

  if (thisid != lastId && lastId != "") {
    $('#subMenuContent').empty();
    populateMenu(thisid);
  } else {

    if (!inSubMenu) {
      $('#subMenuContent').empty();
      populateMenu(thisid);
      $('.subMenuSubMenu').fadeIn('fast');
    }

  }
  lastId = thisid;
  inSubMenu = true;

});
$(document).on('mouseleave', '.subMenuHoverArea', function() {
  setTimeout(function() {
    if (!inSubMenu) {
      $('#subMenuContent').empty();
      $('.subMenuSubMenu').fadeOut('fast');
    }
    inSubMenu = false;

  }, 350);

});

function populateMenu(menuId) {
  // Populates ul element with li from chosen array by appending it through a for loop. Not related to problem
for(var i = 0;  i < menuItems1.length; i++){
					$('#subMenuContent').append(menuItems1[i]);
				}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a id="menu1" href="#" class="subMenuHoverArea subMenuJS">Menu 1</a></li>
  <li><a id="menu2" href="#" class="subMenuHoverArea subMenuJS">Menu 2</a></li>
  <li><a id="menu3" href="#" class="subMenuHoverArea subMenuJS">Menu 3</a></li>
</ul>
<div class="subMenuSubMenu">
  <div class="contentMain">
    <ul id="subMenuContent" class="subMenuHoverArea"></ul>
  </div>
</div>

Answer 1

这是我曾经写过的悬停菜单。这样做的好处是，它会延迟鼠标悬停工作。因此，如果您真正快速地移动多个菜单项，则不会获得“闪烁效果”。您必须将鼠标悬停在元素上150ms才能起作用。您可以根据自己的喜好调整此值。

看起来您的衰落功能似乎引起了一些麻烦。因此，我在css中创建了相同的效果，并使用类进行切换，从而使其工作更加顺畅。

这是如何工作的：

在mouseenter和mouseleave事件上，当前时间都保存在全局变量lastAction中。
在mouseenter和mouseleave事件上，计时器都会启动。在hoverdelay毫秒后，计时器结束。
当计时器结束时，它将检查之前保存的时间是否仍与全局变量中的时间相同。如果在此期间发生了另一个mouseenter / mouseleave事件，则全局值将具有不同的值。如果是这种情况，则什么也不做，否则运行属于该事件的代码。

我用css效果代替了jQuery淡入淡出功能。其原因是因为淡化效果不利于fadeIn()和fadeOut()之间的快速变化。 AddClass()和removeClass()的效果要好得多。通过在不透明度上添加过渡效果，您可以获得相同的fadeIn / fadeOut效果。如果您希望定时更快或更慢，只需更改秒数即可。

var hoverdelay = 150;
var lastAction = 0;

$(document).ready(function() {
  $('#wrapper').on({
    mouseenter: mouseEnterFunction,
    mouseleave: mouseLeaveFunction
  }, '.subMenuHoverArea');
});

function mouseEnterFunction() {
  var now = (new Date().getTime());
  var id = $(this).attr('id');
  lastAction = now;
  window.setTimeout(function() {
    if (lastAction === now) {
      showMenu(id);
    }
  }, hoverdelay);
}

function mouseLeaveFunction() {
  var now = (new Date().getTime());
  lastAction = now;
  window.setTimeout(function() {
    if (lastAction === now) {
      hideMenu();
    }
  }, hoverdelay);
}

function showMenu(id) {
  $('#subMenuContent').empty().append('<li>'+ id + '</li>').addClass('activeMenu');
}

function hideMenu() {
  $('#subMenuContent').removeClass('activeMenu');
}

.subMenuJS {
  background-color: yellow;
}

#subMenuContent {
  background-color: pink;
}

.menu {
  opacity: 0;
  transition: opacity 0.5s;
}

.activeMenu {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='wrapper'>
  <ul>
    <li><a id="menu1" href="#" class="subMenuHoverArea subMenuJS">Menu 1</a></li>
    <li><a id="menu2" href="#" class="subMenuHoverArea subMenuJS">Menu 2</a></li>
    <li><a id="menu3" href="#" class="subMenuHoverArea subMenuJS">Menu 3</a></li>
  </ul>
  <div class="subMenuSubMenu">
    <div class="contentMain">
      <ul id="subMenuContent" class="subMenuHoverArea menu">test</ul>
    </div>
  </div>
</div>

回答您的问题，即每次创建日期对象的效率如何。这是一段执行10000次的代码。

对我来说，经常这样做需要10到20毫秒。我认为，在更糟的情况下，如果用户真的很痉挛，则该事件最多每秒发生100次。因此，我认为性能不是问题。从来没有在我的网站上抱怨过。

var start = (new Date().getTime());

for(var i = 0; i < 10000; i++) {
  var dummy = (new Date().getTime());
}

var end = (new Date().getTime());

console.log((end - start) + ' ms');

Answer 2

您需要使用jquery的“悬停”方法。

尝试一下：

this

strong

不稳定的mouseenter / mouseleave子菜单

2 个答案: