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

【问题标题】：setInterval isn't repeating my code, but it runs once, I wonder why?setInterval 没有重复我的代码，但它运行一次，我想知道为什么？
【发布时间】：2014-03-12 15:30:10
【问题描述】：

这是它完美运行一次的代码，但 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

【问题讨论】：

你怎么知道它没有运行多次？在间隔中放置一个日志。（还有闭环问题）。
我向你保证，setInterval 是连续运行的。你误解了结果。您实际上正在做的是立即在顶部执行 a() b() 和 c() ，然后不再执行它们。不幸的是，我认为你的代码无论如何都不会做你想做的事情，因为 for 循环通常在浏览器渲染更新之前开始和结束，所以我认为没有理由修复它。

标签： javascript css for-loop styles setinterval

【解决方案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);

【讨论】：

【解决方案2】：

使用函数时必须指定参数，而不是使用局部变量 i。

此外，使用这样的函数指针：

var a = [ b, c, d ];

【讨论】：