Почему срабатывает анимация, если кликать по слайдеру?

this.flag почему-то не помогает, в чем может быть проблема? Предполагаю, что функция $.animate() отрабатывает позже, чем flag становится в true.

Кнопки слайдера

$('.left-arrow').on('click', function() {
    if(App.flag) {
        console.log('click');
        App.animateSlider('left');
    }
});

$('.right-arrow').on('click', function() {
    if(App.flag) {
        console.log('click');
        App.animateSlider('right');
    }
});

Сама функция

this.animateSlider = function(vector) {
    App.flag = false;
    var sImg = 0;
    var sText = 0;

    if($('.slide-container').children('.hidden-slide').children('.item:last').css('left') == '0px' && vector == 'left') {
        App.flag = true;
        return false;
    }

    if($('.slide-container').children('.hidden-slide').children('.item:first').css('left') == '0px' && vector == 'right') {
        App.flag = true;
        return false;
    }

    $('.slide-container').each(function () {
        var posImg = parseInt($(this).children('.hidden-slide').children('.item').css('left'))/894 * 100;
        vector == 'left' ? sImg = posImg - 100 : sImg = posImg + 100;
        $(this).children('.hidden-slide').children('.item').animate({
            left: sImg + '%'
        }, 400, 'swing');

        var posText = parseInt($(this).children('.hidden-slide').children('.info-slider').css('left'))/447.5 * 50;
        vector == 'left' ? sText = posText - 100 : sText = posText + 100;
        $(this).children('.hidden-slide').children('.info-slider').animate({
            left: sText + '%'
        }, 730, 'swing');
    });
    App.flag = true;
}