Question

我在延迟for循环中的函数时遇到了麻烦。所以这是我的测试：

<script type="text/javascript">
var j = 0;
for(var i = 0; i <= 100; i++){
    setTimeout(function(){
        console.log(i); 
    },j*2);
    j++;
}
</script>

我希望每个计数都会在控制台中一步一步地出现。但目前只有101次出现101次。为什么以及什么是更好的解决方案？

干杯

Answer 1

JavaScript没有变量的块级别范围，因此任何延迟函数中i的值将是循环中i的 last 值（in你的情况，101）。您可以使用命名函数或立即调用的函数表达式来创建一个闭包，为该值提供正确的范围。

<script type="text/javascript">
var j = 0;
for(var i = 0; i <= 100; i++){
    (function(i) {
    setTimeout(function(){
        console.log(i); 
    },j*2);})(i);
    j++;
}
</script>

另外请记住，传递给setTimeout的第二个参数是以毫秒为单位的延迟，因此每次调用之间的延迟时间非常短（只有一小部分时间）。

Answer 2

function SetTimeoutLoop(i) {
  setTimeout(function() { console.log(i); }, i*2);
}

for(var i = 0; i <= 100; i++){
    SetTimeoutLoop(i)
}

JSFIDDLE

Answer 3

你可以试试这个：

<script type="text/javascript">
var j = 0;
for(var i = 0; i <= 100; i++){
  (function(i, j){
    setTimeout(function(){
        console.log(i); 
    },j*2);
  })(i, j);
  j++;
}
</script>

Answer 4

一旦你的回调开始触发你的循环就会完成并且值将是最大值

你可以这样做

(function me(i,j) {

    if(i <= 10) {

        setTimeout(function(){

            alert(i++);
            me(i,j);

        },j++*2);
    }

})(0,0);

这是a sample fiddle。

Answer 5

你不能在for循环中这样做，而应该使用这样的递归函数：

这里是fiddle

var j = 0;
var i=0;


setTimeout(function(){
    log_i(i);
},j*2);

function log_i(i){
    console.log(i);
    i++; 
    if(i<=100){
       setTimeout(function(){  log_i(i); },j*2);   
    }
    j++;
 }

循环延迟

5 个答案: