禁用点击，直到每个完成

Question

我正在制作一个带有导航元素slideOut动画的全屏导航开口，但是当我快速单击时，打开的一些元素就消失了。 我想禁用单击，直到完成所有动画并删除所有样式。

有我的 jQuery

$(document).ready(function(){
    $('#menuToggle').click(openMenu);
    $('#closeMenu').click(closeMenu);
});

function openMenu(){
    $('.menu li').each(function(i) {
        var row = $(this);
        var animation = 'slideInLeft fast';
        setTimeout(function() {
            row.addClass(animation+' visible', !row.hasClass(animation+' visible'));
        }, 100 * i);

        setTimeout(function() {
            $('.menu li').removeClass(animation);
        }, 1500);
    });
    $('.navigation').fadeIn(300);
}

function closeMenu(){
    $('.navigation').fadeOut(500);

    $('.menu li').each(function(i) {
        var row = $(this);
        var animation = 'slideOutLeft fast';
        setTimeout(function() {
            row.addClass(animation+' visible', !row.hasClass(animation+' visible'));
        }, 100 * i);

        setTimeout(function() {
            $('.menu li').removeClass(animation+ ' visible');
        }, 1500);
    });
}