JavaScript / jQuery : restart for loop on last iteration

Question

I am trying to make a for loop that starts over when it reaches the last iteration.

Here's what I have so far:

    for (var i = 0; i < x + 3; i++) {
    (function(i){
        setTimeout(function(){
            $('#e'+i).animate({'color': '#B2E4FF'}, 500);
            var j = i - 3;
            $('#e'+j).animate({'color': '#A6A5A6'}, 500);
        }, 100 * i);

    }(i));
    if(i == x + 2) {
        i = -1;
        continue;
    }
}

When I add continue; to the script, it stops working completely.

What I want to achieve with this is an animated sliding gradient text. DEMO 1 LOOP: http://puu.sh/aCzrv/98d0368e6b.mp4

Full Code: http://jsfiddle.net/D6xCe/

Regards,

Alex

Amir Popovich · Accepted Answer · 2014-08-03 08:13:47Z

3

Dont abuse the for loop.
Use a while loop for that.

var isCompleted = false;

while(!isCompleted){
// do logic and when completed assign isCompleted = true;

}

Edit
Due to your request, it should look something like this:

var isCompleted = false;
var i = 0;
while (!isCompleted) {
    (function (i) {
        setTimeout(function () {
            $('#e' + i).animate({
                'color': '#B2E4FF'
            }, 500);
            var j = i - 3;
            $('#e' + j).animate({
                'color': '#A6A5A6'
            }, 500);
        }, 100 * i);
    }(i));
    if (i == x + 2) {
        i = 0;
    } else if (i == x + 3) {
        isCompleted = true;
    }
    i++;
}

There is a problem with your code
You say that if i < x+3 -> break the loop and if i == x+2 -> reset the index and start again.

Since i is incremented by 1 on each iteration, you are trying to perform an "infinite loop". Use while(true) for that.

You will never get to the i == x+3 condition so you can remove it from the code I've added and get an infinite loop that does you logic based on resetting after x+2 iterations.

var i = 0;
while (true) {
    (function (i) {
        setTimeout(function () {
            $('#e' + i).animate({
                'color': '#B2E4FF'
            }, 500);
            var j = i - 3;
            $('#e' + j).animate({
                'color': '#A6A5A6'
            }, 500);
        }, 100 * i);
    }(i));

    i = i == x+2 ? 0 : i+1;
}

edited Aug 3, 2014 at 8:13

answered Aug 3, 2014 at 7:25

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

E. Alex Over a year ago

I can't seem to make this work.. It just doesn't start at all. Maybe you could show me an example? I accepted @dfsq 's answer because it works, but I'd love to know if there's a better way of doing this. Thanks.

dfsq · Accepted Answer · 2014-08-03 07:30:53Z

1

You can wrap animation code in function and repeat this function again after the loop is over:

function animate() {
    for (var i = 0; i < x + 3; i++) {
        (function (i) {
            setTimeout(function () {
                var j = i - 3;
                $('#e' + i).animate({color: '#B2E4FF'}, 500);
                $('#e' + j).animate({color: '#A6A5A6'}, 500, function() {
                    if (i == x + 2) {
                        animate();
                    }
                });
            }, 100 * i);
        }(i));
    }
}
animate();

Demo: http://jsfiddle.net/D6xCe/2/

answered Aug 3, 2014 at 7:30

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Ajit Singh · Accepted Answer · 2014-08-03 07:39:44Z

0

if you want to perform a continues execution of certain statement just make an infinitive loop.There are many ways to form a infinitive loop the easiest way is to use while loop. eg:

while(true)
{
//your statements
}

thank you

answered Aug 3, 2014 at 7:39

Ajit Singh

3904 silver badges14 bronze badges

Collectives™ on Stack Overflow

JavaScript / jQuery : restart for loop on last iteration

3 Answers 3

1 Comment

Demo: http://jsfiddle.net/D6xCe/2/

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Demo: http://jsfiddle.net/D6xCe/2/

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related