javascript - 多次单击时，滑块将忽略是否有条件

我有一个jQuery滑块，该滑块通过将left属性设置为1400px来每5秒滑动一次容器div中的项目。一旦left属性达到-2800px，if条件就会开始重置left属性，同时还要从行的开头删除项目并将其附加到列表的后面，以便滑动循环无限地继续。该滑块还具有向左和向右按钮，用户可以根据需要循环浏览图像。

我遇到的问题是，如果快速连续单击多个滑块，则left属性将超出if条件中设置的-2800px边界。我认为这是因为在click属性达到-2800px之前，多次触发了所有单击事件。我该如何阻止这种情况的发生？是否有一个功能可以在第一个功能完成之前阻止多个功能的启动？这是一个jsFiddle（为了显示的缘故，我改变了宽度）：

http://jsfiddle.net/25tt5vmp/

我的jQuery：

$(document).ready(function () {


    var myTimer = setInterval(slide, 5000);

    function slide() {

        var left = $('#sliderList').css('left');
        left = left.substring(0, left.length - 2);
        if (left <= -2800) {


            $('#sliderList').css('left', '-1400px');
            var slide = $('#sliderList li:first');
            $('#sliderList').children('li:first').remove();
            $('#sliderList').append(slide);
            $('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");

        }
        else {
            $('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
        }
    }

    $('#sliderLeft').click(function () {
        var left = $('#sliderList').css('left');
        left = left.substring(0, left.length - 2);
        if (left <= -2800) {


            $('#sliderList').css('left', '-1400px');
            var slide = $('#sliderList li:first');
            $('#sliderList').children('li:first').remove();
            $('#sliderList').append(slide);
            $('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
        else {
            $('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
    });

    $('#sliderRight').click(function () {
        var left = $('#sliderList').css('left');
        left = left.substring(0, left.length - 2);
        if (left >= 0) {


            $('#sliderList').css('left', '-1400px');
            var slide = $('#sliderList li:last');
            $('#sliderList').children('li:last').remove();
            $('#sliderList').prepend(slide);
            $('#sliderList').animate({ left: "+=1400px" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);

        }
        else {
            $('#sliderList').animate({ left: "+=1400" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
    });

});

最佳答案

有一个简单的解决方案。使用阻塞变量。生成一个变量：

var blockedSlider = false;

然后，在开始动画时将其设置为true。
每次单击时，您都要检查blockedSlider是true还是false，并且仅在false时才触发动画。
动画完成后，再次将blockedSlider设置为false。而已。