Javascript Carousel - Ошибка добавления очереди

Question

Я использую карусель jQuery для отображения 5 элементов списка за один раз, при нажатии левой или правой клавиши код переместит список соответствующей ширины для отображения нового элемента. Проблема заключается в том, что пользователь несколько раз нажимает левую или правую кнопку несколько раз быстрее, чем функция будет двигаться в уродливом вопросе.

остановка(). Анимировать не будет работать, потому что он останавливает анимацию не расчет

Мне нужно essientially очереди функции каждый раз, когда пользователь вызывает его или отключить механизм вызова в то время как функция все еще работает? Любая идея о том, как выполнить эту

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

Вам нужно определить переменную movement на более высоком объеме, как это явно недоступны в анимации :

$(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' 
     }); 
    }); 
}