Javascript 如果正在执行另一个HTML元素，则不会触发HTML元素上的事件。如何对事件进行排队？

我有以下问题：

我在一个div上得到了两个事件，基本上在鼠标进入时交换子元素的内容，在鼠标离开时再次交换。看起来是这样的：

<div class="product-tile__wrapper" onmouseenter="slideButtonsPrice(this)" onmouseleave="slideButtonsPrice(this)">. 

。

问题是，如果先触发的函数未完成，则不会触发任何其他事件

因此，当mouseleave完成得足够快，而第一次交换仍在执行时，它无法触发

下面是代码笔，它准确地显示了所描述的问题：

---

我怎样才能使这样的连续事件以正确的方式发生？

谢谢，它帮助解决了问题！提问时，请在问题本身中包含所有相关代码，这里是堆栈溢出，而不仅仅是CodePen。您可以使用它来执行此操作，并让它运行，在这里如此。