Javascript MouseEnter/MouseLeave事件正在为每次激活排队

我遇到了鼠标进入和鼠标离开事件的问题，它在第一次触发时会很好，但是如果我在动画完成之前再次触发事件，例如在1秒间隔内，动画将执行两次。javascript的异步特性导致事件循环将每个事件存储在队列中，直到它完成所有触发的事件。我怎样才能防止这种情况？如果需要的话，我可以提供更多的信息，但我真的无法解决这个问题…我可能需要重新思考我的设计方法，欢迎所有建议，但我真的希望能让它发挥作用

我尝试过这个，但它仍然在排队：

  $('div#nav-sidebar').off('mouseleave').on('mouseleave', mouseLeaveEvent);

  $('div#nav-sidebar').off('mouseenter').on('mouseenter', mouseEnterEvent);

HTML

下面是当前代码

var mouseLeaveEvent = function() {
     console.log('sidebar mouse leave!')
        $('li#GlasswareCandles').children('ul.menu-items').slideUp(750);
        $('li#CandleTins').children('ul.menu-items').slideUp(750);
        $('li#ScentedOils').children('ul.menu-items').slideUp(750);
        $('li#Air-Fresheners').children('ul.menu-items').slideUp(750);
        $('li#OtherProducts').children('ul.menu-items').slideUp(750);
        $(this).children('ul.blog_list.toggle_list').slideUp(1500);
        return false;
};

var mouseEnterEvent = function() {
      console.log('sidebar mouse enter!')
        $(this).children('ul.blog_list.toggle_list').slideDown(500);
        return false;
};

$('div#nav-sidebar').off('mouseleave').on('mouseleave', mouseLeaveEvent);

$('div#nav-sidebar').off('mouseenter').on('mouseenter', mouseEnterEvent);

$（“div#nav边栏”）.off（“mouseleave”）；
$（“导航边栏”）。关闭（“鼠标器”）；
var mouse-leave-event=function（）{
log（'sidebar mouse leave！'）
$（'li#GlasswareCandles'）。儿童（'ul.菜单项'）。幻灯片（750）；
$（'li#CandleTins'）。儿童（'ul.菜单项'）。幻灯片（750）；
$（'li#香油'）。儿童（'ul.菜单项'）。幻灯片（750）；
$（'li#空气清新剂'）。儿童（'ul.菜单项'）。幻灯片（750）；
$（'li#OtherProducts'）。儿童（'ul.菜单项'）。幻灯片（750）；
$（this）.children（'ul.blog\u list.toggle\u list'）.slideUp（1500）；
$（'h4.toggle'）。设置动画({
宽度：0
}, {
持续时间：1500，
完成：函数（）{
sidebar.style.display='none'；
$（'img#侧边栏占位符'）.show（）；
}
});
返回false；
}
$（'div#nav边栏'）。on（'mouseleave'，mouse-leave-event）；
var mouse-enter-event=function（）{
log（'sidebar mouse enter！'）
$（this）.children（'ul.blog\u list.toggle\u list'）。slideDown（500）；
返回false；
}
$（'div#nav边栏'）。在（'mouseenter'，mouse-enter-event）上您可以看看这个示例。它在我的网站上运行得很好

为什么会这样
由于jQuery动画的异步特性，每个新动画都会添加到队列中

如何解决这个问题
您可以尝试使用
.stop（）
清除队列

从：

对元素调用.stop（）时，当前正在运行的动画（如果有）将立即停止。例如，如果在调用.stop（）时使用.slideUp（）隐藏某个元素，则该元素现在仍将显示，但将是其先前高度的一小部分。不调用回调函数

如果对同一元素调用多个动画方法，则稍后的动画将放置在该元素的效果队列中。在第一个动画完成之前，这些动画不会开始。调用.stop（）时，队列中的下一个动画立即开始。如果clearQueue参数的值为true，则队列中的其余动画将被删除，并且永远不会运行

如果jumpToEnd参数的值为true，则当前动画将停止，但元素将立即为每个CSS属性指定其目标值。在上面的.slideUp（）示例中，元素将立即隐藏。然后立即调用回调函数（如果提供）

我试图解决这个问题
根据你的代码，我假设你想在悬停时做些什么？我对你给我们的代码做了修改。我试着做一些类似你意图的东西。但是，如果没有很多代码，它会变得有点困难

请参阅以下代码段


var mouseleavevent=function（）{
//用一个电话代替了几个单独的电话，希望你不介意
$（'li.tab'）.children（'ul.menu items'）.stop（）.slideUp（750）；
$（this）.children（'ul.blog\u list.toggle\u list'）.stop（）.slideUp（1500）；
返回false；
};
var mouseentervent=函数（）{
$（this）.children（'ul.blog\u list.toggle\u list'）.stop（）.slideDown（500）；
返回false；
};
//当我在工作和测试时，实现一个slideDown比较容易
//通过单击切换上的所有元素
$（'h4.toggle'）。单击（函数（）{
$（'div#nav边栏'）。查找（'li.tab'）。子项（'ul.menu items'）。向下滑动（500）；
});
//这将替换注册鼠标进入和退出的单独调用
$（'div#nav边栏'）。悬停（mouseentervent，mouseleavevent）

切换


玻璃器皿蜡烛

一,
二,
三,
四,
五,
六,
七,



蜡烛罐

一,
二,
三,
四,
五,
六,
七,



香油

一,
二,
三,
四,
五,
六,
七,



空气清新剂

一,
二,
三,
四,
五,
六,
七,



蜡熔化

一,
二,
三,
四,
五,
六,
七,



其他产品

一,
二,
三,
四,
五,
六,
七,



您可以在动画结束后解除鼠标事件的绑定，然后在加载或渲染新动画后再次绑定。@Hassan您能提供一个示例吗？请检查此项，我将给它一个快照，看看我是如何操作的
 $(document).ready(function(){
 $("#designer").mouseenter(function(){
     $("#xyz").attr("src", "design.jpg");
     $("#face").css("background-image", "url(des2.jpg)");
     $("#coder").css("opacity", "0.5");
 });
 $("#designer").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#coder").css("opacity", "");
 });
 $("#coder").mouseenter(function(){
     $("#xyz").attr("src", "cp2.jpg");
      $("#designer").css("opacity", "0.5");
      $("#face").css("background-image", "url(coding.jpg)");
 });
 $("#coder").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#face").css("background-image", "url()");
     $("#designer").css("opacity", "");
 });
 });