Dharit Soni Dharit Soni - 5 months ago 9
Javascript Question

jQuery Loop for continue after value < 4 start again with 1 in For Loop

jQuery Loop for continue after value < 4 start again with 1 trying to make a slider using jQuery. but it is loading and not getting response.

$(document).ready(function(e) {
$('.slide:nth-child(2)').css('display','none');
$('.slide:nth-child(3)').css('display','none');
$('.slide:nth-child(4)').css('display','none');

$('.list ul li:nth-child(1)').click(function(e){
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display','none');

$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display','none');

$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display','none');

$('.list ul li:nth-child(1)').addClass('active');
$('.slide:nth-child(1)').fadeIn( 500, function(){
$('.slide:nth-child(1)').css('display','block');
});
});

$('.list ul li:nth-child(2)').click(function(e){
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display','none');

$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display','none');

$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display','none');

$('.list ul li:nth-child(2)').addClass('active');
$('.slide:nth-child(2)').fadeIn( 500, function(){
$('.slide:nth-child(2)').css('display','block');
});
});

$('.list ul li:nth-child(3)').click(function(e){
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display','none');

$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display','none');

$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display','none');

$('.list ul li:nth-child(3)').addClass('active');
$('.slide:nth-child(3)').fadeIn( 500, function(){
$('.slide:nth-child(3)').css('display','block');
});
});

$('.list ul li:nth-child(4)').click(function(e){
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display','none');

$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display','none');

$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display','none');

$('.list ul li:nth-child(4)').addClass('active');
$('.slide:nth-child(4)').fadeIn( 500, function(){
$('.slide:nth-child(4)').css('display','block');
});
});
var timeset;

timeset = setTimeout(
function() {
for (var i = 1; i <= 5; i++) {
if (i > 4) {
var i = 1;
}
$('.list ul li:nth-child(' + i + ')').click();
}
}, 3000);
clearTimeout(timeset);
});


as you can see now I put my complete code here so you can view the code.

Answer

You have called to a setTimeout() function and prevented the execution immediately by calling to clearTimeout() function. So it will not work.

EDIT

After the the communicaton via comments, I came up with a solution. I guess, your requirement is to slide the images/divs in every 3 seconds.

<script>
$(document).ready(function(e) {

    $('.slide:nth-child(2)').css('display','none');
    $('.slide:nth-child(3)').css('display', 'none');
    $('.slide:nth-child(4)').css('display', 'none');

    $('.list ul li:nth-child(1)').click(function (e) {
        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display', 'none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display', 'none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display', 'none');

        $('.list ul li:nth-child(1)').addClass('active');
        $('.slide:nth-child(1)').fadeIn(500, function () {
            $('.slide:nth-child(1)').css('display', 'block');
        });
    });

    $('.list ul li:nth-child(2)').click(function (e) {
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display', 'none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display', 'none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display', 'none');

        $('.list ul li:nth-child(2)').addClass('active');
        $('.slide:nth-child(2)').fadeIn(500, function () {
            $('.slide:nth-child(2)').css('display', 'block');
        });
    });

    $('.list ul li:nth-child(3)').click(function (e) {
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display', 'none');

        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display', 'none');

        $('.list ul li:nth-child(4)').removeClass('active');
        $('.slide:nth-child(4)').css('display', 'none');

        $('.list ul li:nth-child(3)').addClass('active');
        $('.slide:nth-child(3)').fadeIn(500, function () {
            $('.slide:nth-child(3)').css('display', 'block');
        });
    });

    $('.list ul li:nth-child(4)').click(function (e) {
        $('.list ul li:nth-child(1)').removeClass('active');
        $('.slide:nth-child(1)').css('display', 'none');

        $('.list ul li:nth-child(2)').removeClass('active');
        $('.slide:nth-child(2)').css('display', 'none');

        $('.list ul li:nth-child(3)').removeClass('active');
        $('.slide:nth-child(3)').css('display', 'none');

        $('.list ul li:nth-child(4)').addClass('active');
        $('.slide:nth-child(4)').fadeIn(500, function () {
            $('.slide:nth-child(4)').css('display', 'block');
        });
    });

    // Starting to slide (in each 3 seconds)

    var seconds = 3; 
    var i = 1;

    setTimeout(function () {
        slide();
    }, seconds * 1000);

    function slide() {

        if (i > 4) {
            i = 1;
        }

        //console.log(i);
        $('.list ul li:nth-child(' + i + ')').click();
        i++;

        setTimeout(function () {
            slide();
        }, seconds * 1000);
    }
});
</script>

(Please note that your code is not up to the standard because the same piece of codes are repeated there. Instead you should have used functions. I have only concentrated about the sliding part here as a solution for the question you have raised)

.

EDIT 2

Ok, I have written a small piece of code to fulfill your requirement.

Please see this JSFiddle.