javascript - 显示是否隐藏 jQuery

Question

我有一个 div，如果鼠标悬停在另一个 div 上，我会显示该 div，然后当鼠标离开时，该 div 会隐藏。

在我的 mousemove 回调函数中我说$('#divToShow').show()，但是我想知道这是否效率低下，因为 mousemove 事件被频繁触发，并且该 div 是否已经显示然后它无缘无故地调用 show() 。

检查 div 是否隐藏并仅显示它会更有效吗？像这样:

if ($('#divToShow').is(":hidden")){
  $('#divToShow').show();
}

或者另一种解决方案是使用一个 bool 变量，在第一次显示 div 时将其设置为 true，然后在 mouseleave 上将其设置为 false。

有人知道如何在 mousemove 函数中有效地显示 div 吗？

Answer 1

由于您使用的是 Jquery，因此执行您想要的操作的更有效方法是使用 .hover(handlerIn, handlerOut)回调，因此您无需担心创建标志或类似的东西。

当鼠标进入目标 div 时，handlerIn 只会被触发一次(如您在 console.log('show ') 调用)。 handlerOut 也只会在鼠标离开目标 div 时执行一次。

在下面的示例中，当鼠标悬停#div-b时，#div-a内容将可见，当鼠标离开时，内容将隐藏:

$(function() {
  $('#div-b').hover(
    function() {
      console.log('show');
      $('#div-a').show();
    },
    function() {
      console.log('hide');
      $('#div-a').hide();
    }
  );
});

#div-a {
  display: none;
  padding: 20px;
}

.wrapper {
  margin: auto;
  background-color: darkcyan;
  color: white;
  height: 100px;
  margin-bottom: 10px;
}

#div-b {
  padding: 20px;
  height: 50px;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="div-a">
    I'm visible!
  </div>

</div>

<div id="div-b">
  Hover me
</div>