Javascript 如何阻止余烬鼠标事件处理程序延迟

因此，我有一个组件，我正在处理mouseEnter和mouseLeave事件，以便该组件可以在鼠标进入和离开时上下滑动

在没有Ember的情况下，我已经在jQuery中多次这样做了，我不记得曾经发生过这种情况。基本上，它将执行每个mouseEnter和mouseLeave事件（将它们堆叠在一起），因此，如果用户意外地将鼠标插入组件，鼠标离开，然后又回到组件中，它将向下滑动，然后向上滑动，然后再次向下滑动。如果我快速进入和退出，它将向下、向上、向下、向上、向下、向上滑动。和我做的次数一样多

找不到关于这个的任何信息，因为似乎很难找到关于灰烬的模糊用法的任何信息

这是我在组件的JS文件中看到的内容：

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['template-select', 'windows-select-container'],

  mouseEnter: function() {
    let $options = $('.windows-select-container > .vault-custom-container')
    $options.slideDown();
  },

  mouseLeave: function() {
    let $options = $('.windows-select-container > .vault-custom-container')
    $options.slideUp();
  }
});

---

因此，我最终使用了纯CSS方法，概述如下：

.windows-select-container {
    cursor: default !important;
}

.vault-custom-container {
    margin-top: 0px;
    height: 0px;
    overflow: hidden;
    -webkit-transition: 300ms ease-in-out;
    -moz-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
    -webkit-transition-property: margin-top, height;
    -moz-transition-property: margin-top, height;
    transition-property: margin-top, height;
}

.windows-select-container:hover .vault-custom-container {
    margin-top: 25px !important;
    height: 44px !important;
}

---

您是否尝试过关闭操作？这可能会提高您的性能。也可以稍微放松一下。考虑<代码>余烬并发< /代码>。做幻灯片类的动画，你可以使用我还没有尝试关闭动作。我之前尝试了动作，但没有将其作为一个组件，但它不起作用，但这让我感到困惑，因为它希望在控制器中为路线执行动作，但当我将其放置在控制器中时，它不起作用，并且永远无法找出原因。如果可能，考虑使用纯CSS解决方案。看看是否可以将高度从0px转换为当前高度。父容器设置为height:auto，这也会使容器展开/收缩。我可能会将

：hover

部分更改为直接子元素，而不是所有元素（空格）。。。但除此之外，这正是我所需要的。此外，除了“滞后”之外，它似乎还因为某些原因在某些点上掉帧。不知道为什么。