Javascript Carousel - 添加队列的问题

Question

我正在使用 jQuery 轮播一次显示 5 个列表项，当向左或向右单击时，代码会将列表移动到适当的宽度以显示新项目。我遇到的问题是，当用户快速多次单击左键或右键时，该功能会移动得很丑。

stop().animate 将不起作用，因为它停止动画而不是计算

每次用户调用函数时，我都需要对函数进行排队，或者在函数仍在运行时禁用调用机制？关于如何实现这一点的任何想法

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