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

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

您可以根据需要附加和分离事件，但我没有得到的问题是，当您在动画运行时“关闭”事件时，您在点击期间遇到问题。

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

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