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

我有一段javascript代码,它可以监听鼠标,并使div淡出并重新进入.

我遇到的问题是如果用户鼠标悬停多次,从而导致函数的逻辑执行此操作:

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

在这一点上,我同时发生淡出和淡入淡出,导致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);

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

最佳答案
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;});
}

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

转载注明原文:javascript – 从事件侦听器同时运行的冲突函数 - 代码日志