javascript - 如何在进行另一个函数调用时停止执行 javascript/jquery

Question

我对 JavaScript 的理解不是很好，但我一直在尝试使用它在我 child 的网站上制作一些互动功能，experimonkey.com .我的最新想法之一是当用户将鼠标悬停在相应的菜单项上时，使用 JQuery 的 toggle() 函数在主页弹出菜单项上显示附加信息。这几乎完成了我想做的事情，除非你开始过快地将鼠标悬停在链接上，事情变得非常奇怪......每个函数调用都被执行到完成并且浏览器开始滞后。

有没有办法解决这个问题，让队列中一次只有一个元素？我一开始就完全错了吗？下面是我正在使用的代码示例。

function show(id) {
  $(document).ready(function() {
    $("#" + id).slideToggle();
  });
}

.hidden {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="col-6  col-sm-4 col-lg-2 tile p-1">
  <a href="/edu-center" onmouseenter="show('edu-center')" onmouseout="show('edu-center')">
    <div class="card">
      <div class="card-header" id="tile-edu-center"></div>
      <div class="card-body text-center">
        <h5>Edu-center</h5>
        <small id="edu-center" class="hidden">Science research and information for kids</small>
      </div>
    </div>
  </a>
</div>

Answer 1

另一种方法是使用:hover 伪类。现在，对于动画，您可以使用 max-height。

.hidden {
  display: inline-block;
  max-height: 0px;
  overflow: hidden;
}

small {
  transition: all 0.5s ease-in-out;
}

a:hover small {
  max-height: 1000px;
  height: auto;
  transition: all 1s ease-in-out;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="col-6  col-sm-4 col-lg-2 tile p-1">
  <a href="/edu-center">
    <div class="card">
      <div class="card-header" id="tile-edu-center"></div>
      <div class="card-body text-center">
        <h5>Edu-center</h5>
        <small id="edu-center" class="hidden">Science research and information for kids</small>
      </div>
    </div>
  </a>
</div>