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

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

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

var a = [ b, c, d ];

Answer 2

您的代码存在一些问题。首先，您立即执行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);

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

2 个答案: