jquery - 仅在动画完成后激活按钮上的事件

Question

我创建了一个按钮，当它被点击时，它会移动一些图像，但是当我快速点击按钮时，jQuery 会在图像的移动上创建一个错误。所以我想禁用按钮，直到 .animate() 函数没有完成。我尝试编写此代码但不正确。

var next = $('.next');

function nextAction(e){
    e.preventDefault();
    next.off('click');
    if(pellicle.css('left').replace(/[^-\d\.]/g, '') <= -(stepTotalWidth - screenWidth)){
        pellicle.animate({
            left:'0'
        },1000, function(){next.on('click', nextAction);});
    }
    else {
        pellicle.animate({
            left:'-=' + screenWidth
        },1000);
    }
}

next.on('click', nextAction);

Answer 1

您可以随心所欲地附加和分离事件，我没有得到什么问题，除了在动画运行时“关闭”事件时点击期间有问题。

为此，您可以附加另一个阻止默认的事件，第二个将运行动画

function nextAction(e){
    next.off('click.gallery'); //detach by namespace
    next.off('click', nextAction); //detach by link on function

    //Your code and again attach animation click
}


next.on('click', function(e){ 
  e.preventDefault(); 
});

next.on('click.gallery', nextAction); 
/* .gallery is not necessary if you will detach events 
by the link on the function that attached to that */

第二件事是pellicle.css('left')在这种情况下总是返回 ***px 比正则表达式快一点，在这种情况下parseInt(pellicle.css('left'), 10) || 0它总是会给你一个数字。

Answer 2

Flops的完美解决方案，这里有完整的代码

//next button
function nextAction(e){
    next.off('click', nextAction); //detach by link on function
    e.preventDefault();
    if(parseInt(pellicle.css('left')) <= -(stepTotalWidth - screenWidth)){
        pellicle.animate({
            left:'0'
        },1000, function(e){next.on('click', nextAction);});
    }
    else {
        pellicle.animate({
            left:'-=' + screenWidth
        },1000, function(e){next.on('click', nextAction);});
    }
}
next.on('click', nextAction);