Question

我创建了一个代码，它将一个元素向上抛出一个加速度（像重力一样工作）值，并在changed_lenght达到零时下降;

＆＃34;的mouseenter＆＃34;正在触发此功能。当鼠标离开并快速进入时，该功能会一遍又一遍地开始，并且不会停止之前的功能，因此看起来很糟糕。

我想知道在开始这个功能之前有没有办法检查前一个是否已经结束。或任何其他可以帮助我的解决方案？

这是我的 JS代码：

$('#outher').mouseenter(function moveone(){

    var t = 0;
    var v = 20;
    var p = 275;
    var a = 5;
    var moveoneint = setInterval(jump, 50);
    function jump(){
            t++;
            x = (v*t) - (0.5 * a * t * t);
            p = (p - x);
            if(x <= 0){
                clearInterval(moveoneint);
                t = 0;
                var movetwo = setInterval(fall, 50);
                function fall(){
                    t++;
                    x = (0.5 * a * t * t );
                    p = (p + x);
                    document.getElementById('inner').style.top = p + 'px';
                    if(p >= 275){
                        clearInterval(movetwo);
                    }
                }


            }
            else{               
                document.getElementById('inner').style.top = p + 'px';      
        }
    }
});

这是一个小提琴：

http://jsfiddle.net/ctarimli/TJte8/

Answer 1

您可以简单地删除mouseenter处理程序，直到动画完成。

JSFIDDLE

基本上，

var $outher = $('#outher');

var onMouseEnter = function() {
    $outher.off('mouseenter', onMouseEnter);

    // do all your animation logic, and once complete...
    $outher.on('mouseenter', onMouseEnter);
};

$outher.on('mouseenter', onMouseEnter);

Answer 2

如果您对第三方库代码持开放态度，那么throttle /debounce将执行您想要的操作。请注意，该页面提到了jQuery，但该库实际上并不需要jQuery。

特别是，请查看$ .throttle方法的示例。

Answer 3

使用jQuery is检查div是否为动画

if(!$('.inner').is(':animated'))
{
     //Your code
}

如果第一次没有完成，则阻止第二次启动功能

3 个答案: