将数组作为函数参数传递给setTimeout的行为与传递变量不同

Question

以下代码使用for循环向数组添加值。 每次在控制台中记录阵列的当前状态。 然后使用setTimeout函数在输出之间创建半秒的延迟。

但延迟输出总是在传递整个for循环后显示整个数组的状态，而不是调用setTimeout时的状态。

var my_array = [];

for (var i = 0; i < 10; i++){
  my_array[i] = "Nr " + i;

  console.log(my_array);    
  setTimeout(function(par) { console.log(par); }, 500*i, my_array);

}

如何解释这种行为？ 考虑以下代码，这是不同的，因为它将i变量发送到回调（而不是数组）：

for (var i = 0; i < 10; i++){

  console.log(i);
  setTimeout(function(par) { console.log(par); }, 500*i, i);

}

此片段将i-variable记录在延迟输出中，其值为调用setTimeout的时间。 正如预期的那样，它不会将i变量记录为for循环后的值。

Answer 1

在半秒延迟中，原始阵列被改变，因此将显示孔阵列。 您必须克隆数组以获得所需的效果

尝试改变

setTimeout(...); 

至

(function (arr) {
    setTimeout(function(par) { console.log(par); }, 500*i, arr);
})(my.slice(0));

使用my.slice（0），您可以使用当前状态克隆整个数组，因此无法对其进行任何更改

更新：

setTimeout(function(par) { console.log(par); }, 500, my_array.slice(0));

删除了* i（你想要延迟半秒）并删除了封闭（不必要）。 仍然完美工作： https ： //jsfiddle.net/wuL3a52x/

Answer 2

尝试这个：

<script>
  var my = [];
  for(var i = 0; i < 10; i++)
  {
    my.push("Nr " + i);
    var myArr=my.slice(0);
    setTimeout(function(x)
    {
      return function()
      {
        console.log(x);
      };
    }(myArr), 1000 * i);
  }
</script>

Answer 3

发生这种情况是因为setTimeout使用对my的引用，并且在第一次回调执行时，循环已经结束。

您可以使用slice在每个循环中创建数组的副本以使其不可变并将其传递给setTimeout

 var my = [1,2,3,4,5,6,7,8,9,10]; for (var i = 0; i < 10; i++){ my[i] = "Nr " + i; setTimeout(function(par) { console.log(par); }, 500*i, my.slice()); }