[英]JavaScript / jQuery : restart for loop on last iteration
我试图做一个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;
脚本,它将完全停止工作。
我要实现的是动画滑动渐变文本。 演示1循环: http : //puu.sh/aCzrv/98d0368e6b.mp4
完整代码: http : //jsfiddle.net/D6xCe/
问候,
亚历克斯
不要滥用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;
}
您可以将动画代码包装在函数中,并在循环结束后再次重复此函数:
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();
如果要执行某个语句的继续执行,只需要进行不定式循环。形成不定式循环的方法有很多,最简单的方法是使用while循环。 例如:
while(true)
{
//your statements
}
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.