jQuery阻止快速点击

Question

我的代码有问题.我有一个.click函数,我想在动画中禁用它(以防止快速点击).我测试了我在互联网上发现的一切.感谢帮助!

$('#content').click(function() {

    if($('#content').hasClass('closed')){
            $('#content').animate({
            height: '300px',
            }, 1000, 'easeInQuint', function() {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            });
            $('#content').removeClass('closed');
            $('#content').addClass('open');
        } 



    else {
            $('#content').animate({
            height: '150px',
            }, 1000, 'easeInQuint', function() {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");

            });
            $('#content').removeClass('open');
            $('#content').addClass('closed');

        }       
});

Answer 1

您可以尝试使用这样的标志:

var stopClick = false;
$('#content').click(function () {
    if(stopClick) return;
    stopClick = true;
    if ($('#content').hasClass('closed')) {
        $('#content').animate({
            height: '300px',
        }, 1000, 'easeInQuint', function () {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            stopClick = false;
        });
        $('#content').removeClass('closed');
        $('#content').addClass('open');
    } else {
        $('#content').animate({
            height: '150px',
        }, 1000, 'easeInQuint', function () {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");
            stopClick = false;
        });
        $('#content').removeClass('open');
        $('#content').addClass('closed');
    }
});

Answer 2

由于您想防止由于动画而导致的这种情况，您可以使用.is(':animated')：

$('#content').click(function() {
    if(!$('#content').is(':animated')){ // If the element is not animate, do something.
        if($('#content').hasClass('closed')){
            $('#content').animate({
                height: '300px',
            }, 1000, 'easeInQuint', function() {
                $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            });
            $('#content').removeClass('closed');
            $('#content').addClass('open');
        } 



        else {
            $('#content').animate({
                height: '150px',
            }, 1000, 'easeInQuint', function() {
                $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");

            });
            $('#content').removeClass('open');
            $('#content').addClass('closed');

        }  
    }
});