使用 setTimeout 延迟循环迭代

Question

我想在每次迭代时延迟我的while循环。 我尝试了以下方法：

var o = 1;
while(o<4){
    setTimeout("setupAnimation(o)",2000);
    //setupAnimation(o); //<--this works but everything happens att the same time
    o++;
}

我也试过这样写，也不管用：

var o = 1;
function repeatMe(){
    setupAnimation(o);
    o++;
    setTimout('repeatMe()',1000);
}

有什么建议么？

Answer 1

eval速度慢、难以调试并且存在潜在的安全问题（取决于数据的来源）。 不要使用它。 （通过代理将字符串传递给setTimeout使用eval 。）

将 function 传递给setTimeout 。 您需要使用闭包来捕获您传递的o的当前值。

您可能还应该在此处使用for循环而不是while循环。 语法更清晰。

function setupAnimationFactory(o) {
    return function() {
        setupAnimation(o);
    }
}

for (var o = 0; o < 4; o++){
    setTimeout(setupAnimationFactory(o),2000);
}

Answer 2

尝试这个：

var o = 1;
function repeatMe(){
    setupAnimation(o);
    o++;
    setTimeout(function(){repeatMe();},1000);
}

repeatMe();

Answer 3

如果你想使用第二种方法，这里是有效的 Javascript

<script type="text/javascript">

    var o = 1; 
    function repeatMe(){ 

    setupAnimation(o); 
    o++; 

    setTimout(repeatMe(),1000); 
    } 

    function setupAnimation(o){
        alert(o);
    }

    </script>

<a href='#' onclick="repeatMe()">Click Me</a>

Answer 4

var o = 1;  //Global Variable
var animTimerId;  //Global Variable

function setupAnimation(o){
   // Your code goes here

   o++;
   if(o == 4){
     clearTimeout(animTimeoutId);
     break;
   }
}

function repeatMe(){
   animTimeoutId = setTimeout("setupAnimation(o)",2000);
}

Answer 5

你可以使用这个：

setTimeout(function(){ myFunction(parameter)}, timeoutLength);