Javascript Carousel - Issue adding Queue

Question

I am using a jQuery carousel to display 5 list items at a time, when clicked left or right the code will move the list the appropriate width to display a new item. The problem I have is when the user clicks the left or right button multiple times quickly the function will move in an ugly matter.

stop().animate will not work because it stops the animation not the calculation

I need to essientially queue the function everytime the user calls it or disable the call mechanism while the function is still running? Any idea on how to accomplish this

jQuery

$(document).ready(function() {
    $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
});

function brandSlide(direction) {
    //Create width variables
    var brand_item_total_width = 196;

    //Create movement variable by adjusting the LEFT position +/-
    if (direction == 'left') {
        var movement = parseInt($('.brand-carousel-inner').css('left')) + brand_item_total_width;
    } else {
        var movement = parseInt($('.brand-carousel-inner').css('left')) - brand_item_total_width;
    }

    //Apply movement variable, animate carousel and reposition UL
    $('.brand-carousel-inner').animate({
        'left': movement
    }, 700).promise().done(function() {
        if (direction == 'left') {
            $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
        } else {
            $('.brand-carousel-inner li:last').after($('.brand-carousel-inner li:first'));
        }
        $('.brand-carousel-inner').css({
            'left': '-196px'
        });
    });
}

HTML

<section id="brand-carousel">
        <a href="#" onclick="brandSlide('left'); return false" class="nav-left"></a>
        <a href="#" onclick="brandSlide('right'); return false" class="nav-right"></a>
        <div class="brand-mask">
           <ul class="brand-carousel-inner">
                    <li><img src="image/image.jpg" /></li>
                    /*20 more list items*/
           </ul>
        </div>
     </section>  

Answer 1

You need to define the variable movement on a higher scope as it is clearly inaccessible in the animation:

$(document).ready(function() {
    $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
});

function brandSlide(direction) {
    //Create width variables
    var brand_item_total_width = 196;

    //Create movement variable by adjusting the LEFT position +/-
    var movement = null;

    if (direction === 'left') {
        movement = parseInt($('.brand-carousel-inner').css('left')) + brand_item_total_width;
    } else {
        movement = parseInt($('.brand-carousel-inner').css('left')) - brand_item_total_width;
    }

    //Apply movement variable, animate carousel and reposition UL
    $('.brand-carousel-inner').animate({
        'left': movement
    }, 700).promise().done(function() {
        if (direction === 'left') {
            $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
        } else {
            $('.brand-carousel-inner li:last').after($('.brand-carousel-inner li:first'));
        }
        $('.brand-carousel-inner').css({
            'left': '-196px'
        });
    });
}