Question

我正在尝试创建一个在到达最后一次迭代时重新开始的for循环。

这是我到目前为止所拥有的：

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

当我向脚本添加continue;时，它会完全停止工作。

我想要实现的是一个动画滑动渐变文本。 DEMO 1 LOOP：http://puu.sh/aCzrv/98d0368e6b.mp4

完整代码：http://jsfiddle.net/D6xCe/

问候，

亚历

Answer 1

不要滥用for循环。
为此使用while循环。

var isCompleted = false;

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

}

修改的
根据您的要求，它看起来应该是这样的：

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

您的代码存在问题
如果i < x+3 -> break the loop和i == x+2 -> reset the index and start again.

，请说明

由于i在每次迭代时增加1，因此您尝试执行“无限循环”。请使用while(true)。

你永远不会达到i == x+3条件，所以你可以从我添加的代码中删除它，并获得一个无限循环，根据x + 2次迭代后的重置，你可以使用逻辑。

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

您可以在动画中包装动画代码，并在循环结束后再次重复此功能：

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();

演示：http://jsfiddle.net/D6xCe/2/

Answer 3

如果你想执行某个语句的继续执行只是做一个不定式循环。有很多方法可以形成一个不定式循环，最简单的方法就是使用while循环。例如：

while(true)
{
//your statements
}

谢谢

JavaScript / jQuery：在最后一次迭代时重启for循环

3 个答案:

演示：http://jsfiddle.net/D6xCe/2/