滑块忽略如果多次单击时有条件

时间:2014-09-02 12:07:45

标签: javascript jquery html css

我有jQuery滑块,通过使用1400px动画左侧属性,每隔5秒将项目通过容器div滑动。一旦left属性达到-2800px,if条件开始重置left属性,同时还从行前面删除项目并将它们附加到列表的后面,以便滑动循环无限地继续。此滑块还有左右按钮,允许用户根据需要循环显示图像。

我遇到的问题是,如果您快速连续多次单击滑块,则left属性将超出if条件中设置的-2800px边界。我假设这是因为多个单击事件都在左侧属性到达-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);
        }
    });

});

1 个答案:

答案 0 :(得分:1)

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

var blockedSlider = false;

然后,在开始动画时将其设置为true。 在每次单击时,您检查,如果blockedSlider为true或false,则仅在false时触发动画 动画完成后,再次将blockedSlider设置为false。那就是它。