javascript - setInterval 没有重复我的代码，但它运行一次，我想知道为什么？

Question

这是它运行一次完美的代码，但 setInterval 不会重复第二次，或者说它假设的其他连续时间，这就是我想要的，例如当它到达数组的最后一个位置时返回首先等等，有人可以帮助我，我非常感谢。

CSS:

#ok{position:absolute}

HTML:

<div id="ok">ok</div>

脚本:

var a=[b(),c(),d()];

function b(){
for (var i=0;i<700000;i++){document.getElementById("ok").style.left=(i)+"px";}
alert(i);
};
function c(){
for (var i=0;i<20;i++){document.getElementById("ok").style.left=(i)+"px";};
alert(i);
}
function d(){
for (var i=0;i<5;i++){document.getElementById("ok").style.left=(i)+"px";alert(i)};
};
for(var i=0;i<a.length;i++){
setInterval(function(){a[i];if(i==a.length-1){i=0;};},1000);
}

演示: jsfiddle

Answer 1

您的代码有几个问题。首先，您将立即执行 b() c() 和 d() 而不是在每个时间间隔执行。此外，b() c() 和 d() 不会导致任何类型的动画，因此 for 循环完全没有意义。然后，您的 for 循环结束时就不需要包装间隔了。

http://jsfiddle.net/EBhKp/1/

var a = [b, c, d];

function b() {
    document.getElementById("ok").style.left = 700000 + "px";
    console.log(700000);
}

function c() {
    document.getElementById("ok").style.left = 20 + "px";
    console.log(20);
}

function d() {
    document.getElementById("ok").style.left = 5 + "px";
    console.log(5);
}
var i = 0;
setInterval(function () {
    a[i]();
    i++;
    if (i == a.length) {
        i = 0;
    }
}, 1000);

基本的 css 过渡将添加动画:

http://jsfiddle.net/EBhKp/2/

这里是简化的:

var a = [700000, 20, 5];

function setLeftStyle(position) {
    document.getElementById("ok").style.left = position + "px";
    console.log(position);
}
var i = 0;
setInterval(function () {
    setLeftStyle(a[i]);
    i++;
    if (i == a.length) {
        i = 0;
    }
}, 1000);