Question

我遇到了以下面试问题：

var arr = [ 10, 12, 15, 21 ];

for(var i = 0; i < arr.length; i++) {
  //console.log('outside timeout ' + i)
  setTimeout(function(){
    console.log('Index: ' + i + ', element: ' + arr[i])
  }, 3000)
}

当setTimeout运行时，循环已经完成运行。但是，我如何在setTimeout输出4？它不应该停在3？

https://codepen.io/AlexanderWeb00/pen/vjXmBo

Answer 1

围绕IIFE包裹setTimeout

var arr = [ 10, 12, 15, 21 ];

for(var i = 0; i < arr.length; i++) {
  //console.log('outside timeout ' + i)
  (function(i){
        setTimeout(function(){
           console.log('Index: ' + i + ', element: ' + arr[i])
        }, 3000)
    })(i);
}

推理 - var是功能范围变量，即使在if/for/while中指定，也可在整个函数中使用。该条件控制循环运行的次数，当i变为4时，这将在此处中断。但是，当i=0或i=1和其他人执行超时功能时，我已经达到4因为它已经完成了for循环。因此，您需要使用IIFE显式传递i的值。

此外，如果您使用的是ES6及以上版本，则可以在评论中使用Satpal指定的let。

var arr = [ 10, 12, 15, 21 ];

for(let i = 0; i < arr.length; i++) {
  //console.log('outside timeout ' + i)
  setTimeout(function(){
    console.log('Index: ' + i + ', element: ' + arr[i])
  }, 3000)
}

var i遍历数组长度

1 个答案: