Javascript 从事件侦听器同时运行的冲突函数

我有一段javascript代码，可以监听鼠标悬停并使div淡出和返回

我遇到的问题是，如果用户鼠标多次翻转，从而导致函数的逻辑执行此操作：

mouse over¬
   fade out
   fade in [mouse over again] ¬  
                     fade out

在这一点上，我有一个

淡出

和一个

淡入

同时发生，导致div上出现奇怪的闪烁。我不知道如何防止它

工作小提琴：将鼠标快速移入div外，它将闪烁

我的代码如下：

function check(){
    var div_id = document.getElementById('my_div');
    var opacity = window.getComputedStyle(div_id).opacity;

    function fade_in(){
        var opacity = window.getComputedStyle(div_id).opacity;
        var direction =1 ; //fade in

        transition_opacity(div_id,opacity,direction,0)
    }


    var direction = 0; //fade out first
    transition_opacity(div_id,opacity,direction,fade_in)

}

 var div_id = document.getElementById('my_div');
 div_id.addEventListener('mouseover',check,false);

---

如何防止这种情况发生？

将淡入状态存储在全局变量/隐藏输入字段中。启动时为1，停止时为零。如果变量为1，则不要运行淡出。

您可能只需要使用一个标志来控制运动

var busy = false;
function check(){
 if( busy ) return;
 busy = true;
 ...
function fade_in(){
 var opacity = window.getComputedStyle(div_id).opacity;
 var direction =1 ; //fade in  
 transition_opacity(div_id,opacity,direction,function(){busy=false;});
}

---

这将阻止动画在完成之前启动。

jQuery是一个选项吗？我可以在jquery plus add stop（）方法中复制流程，以帮助流程上的角色符合您的可视化图表。不，我没有使用库，您可以在淡出/淡出过程中使用。