在开始下一个函数之前等待一个函数完成答案

【问题标题】：Wait for a function to finish before starting next one在开始下一个函数之前等待一个函数完成
【发布时间】：2021-08-23 18:54:28
【问题描述】：

可能是一个非常简单的问题，但我是 JavaScript 新手：

如何在开始“mouseleave”动画之前等待“mouseenter”动画完成？

有时用户的鼠标移动非常快，但我希望动画完全播放 mouseleave 动作被调用。


$('.footer-links').on('mouseenter', function() {
  $(this).addClass('hover');
});

$('.footer-links').on('mouseleave', function() {
  $(this).removeClass('hover');
});

【问题讨论】：

标签： javascript jquery async-await wait

【解决方案1】：

如果您使用 CSS transition 或 animation，请使用相应的 "transitionend" 或 "animationend" 事件：

要在悬停时保持悬停状态，请将 "transitionend" 回调移动到 "mouseleave" 事件中，并确保在 CSS 中同时使用 :hover 和 class .hover！

$('.footer-links').on({
  mouseenter() {
    $(this).addClass('hover');
  },
  mouseleave() {
    $(this).on("transitionend", function() {
      $(this).removeClass('hover');
    });
  }
});

.footer-links {
  transition: background 2s ease-out;
}

.footer-links:hover,
.footer-links.hover {
  background: red;
}

<div class="footer-links">TEST ONE</div>
<div class="footer-links">TEST TWO</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

【讨论】：

谢谢，在某些情况下可以很好地工作，但我需要在用户悬停时保持“悬停”状态。当我测试您的代码时，动画结束后立即删除“悬停”类
@SamuelCharpentier 将其添加到 "mouseleave" 事件中 - 我将编辑我的答案。编码愉快！
“mouseleave”似乎对我不起作用:(这是我的测试：nolk-ae69bb.webflow.io/test-add-class
@SamuelCharpentier 在您的演示中，您正在切换一些"onhover" 类，但我在您的CSS 中看不到任何.onhover。我在上面发布的示例是否有效？如果是 - 确保实现它的所有部分:)
奇怪，当转换设置为 1 秒或更多时，它似乎正在工作。它不适用于快速转换（我正在尝试 200 毫秒）

【解决方案2】：

你需要绑定某种事件来检查css动画。

el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

您可以添加适当的 profixed-events 以及 webkitAnimationEnd

【讨论】：