CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mikey
Mikey

Reputation: 396

Slider Ignoring If Conditional When Clicked Multiple Times

I have jQuery slider that slides items through a container div every 5 seconds by animating the left property by 1400px. Once the left property reaches -2800px an if conditional starts resetting the left property while also removing items from the front of the row and appending them to the back of the list, so that the sliding loop continues infinitely. This slider also has left and right buttons that will allow the user to cycle through the images if they would like to.

The problem I have encountered is that if you click the sliders multiple times in quick succession then the left property goes outside of the -2800px boundary set in the if conditional. I am assuming this is because the multiple click events are all fired off before the left property reaches the -2800px. How can I stop this from happening? Is there a function that will stop multiple functions from firing before the first one is complete? Here is a jsFiddle (I changed the widths for displays sake) :

http://jsfiddle.net/25tt5vmp/

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

});

Upvotes: 0

Views: 100

Answers (1)

Andi
Andi

Reputation: 939

There is one easy solution. Use a blocking-variable. Generate a variable:

var blockedSlider = false;

Then, set it to true when starting the animation. On every click, you check, if the blockedSlider is true or false, and only fire the animation if false.
And after your animation is done, set the blockedSlider to false again. That's it.

Upvotes: 1

Related Questions