Question

我有这个循环。当我尝试使用i传递setTimeout时，我会在每个周期得到相同的结果“i的最终结果。”

  for( var i = 0; i < step.length; i++  ){

      setTimeout( function(   ){

          insideJMove.doMove( i );

      } , 1000 ); 

    }

如何在每个周期内i内获得setTimeout的不同值？

Answer 1

有两种方法可以解决这个问题。发生这种情况是因为使用var定义的变量范围是其当前执行上下文。使i成为一个将在循环中重用的全局变量。

使用let关键字：

[let]按预期工作，因为[for循环]的[匿名]内部函数的实例引用变量i的不同实例

这是因为：

let声明的变量的范围是定义它们的块，以及任何包含的子块

for( let i = 0; i < step.length; i++  ){

    setTimeout( function(   ){

        insideJMove.doMove( i );

    } , 1000 ); 

}

或立即调用函数表达式

这将创建一个新的执行上下文，其中i的值保持为执行函数表达式时的任何值。

for( var i = 0; i < step.length; i++  ){
    (function(i){
        setTimeout( function(   ){

            insideJMove.doMove( i );

        } , 1000 ); 
    })(i);

}

Answer 2

使用let代替var：

for (let i = 0; i < step.length; i++) {
  setTimeout(function() {
    insideJMove.doMove(i);
  } , 1000 );     
}

请参阅What's the difference between using "let" and "var" to declare a variable?。

Answer 3

setTimeout 运行异步，因此当它调用第一个setTimeout时，循环将结束，因此变量i 将使它在循环中具有最后一个值。

其中一个解决方案是使用递归：

var i=0;
function loop(){

    insideJMove.doMove( i );

    if (i<step.length)
    setTimeout(loop,1000);

    i++;
}

loop();//start our loop

如何使用setTimeout进行用户操作？

3 个答案: