JavaScript / jQuery：在上一次迭代时重新启动循环

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

Answer 1

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

var isCompleted = false;

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

}

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++;
}

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

Answer 2

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/

Answer 3

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