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());

}

Answer 4

您可以使用async / await解决此问题：

 function timer(ms) {
     return new Promise(res => setTimeout(res, ms));
 }

 for (var i = 0; i < myArray.length; i++){
     console.log(myArray[i]);
     await timer(500);
 }

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

4 个答案: