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

setInterval isn't repeating my code, but it runs once, I wonder why?

本文关键字：一次 为什么 想知道 我的 代码 setInterval 运行      更新时间：2023-09-26

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

您的代码有几个问题。首先，您立即执行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);

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

而且，像这样使用函数指针:

var a = [ b, c, d ];
相关文章：