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

Question

我有一段javascript代码可以侦听鼠标，并使div淡出并重新输入。

我遇到的问题是如果用户多次鼠标悬停，从而导致该功能的逻辑执行此操作：

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

此时我同时发生了fade out和fade in，导致div出现奇怪的闪烁。而且我不确定如何防止它。

工作小提琴： http://jsfiddle.net/WgNuX/4/ 非常快速地将鼠标移出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);

我该怎么做才能防止这种情况发生？

Answer 1

的 jsFiddle Demo 的

您应该只使用一个标志来控制动作。

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;});
}

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

Answer 2

将淡入淡出的状态存储在全局变量/隐藏输入字段中。 1开始时为零，停止时为零。如果变量为1，请不要淡出淡出。