在循环内的 setTimeout 中保留参数值答案

【问题标题】：Preserve parameter value in setTimeout inside loop在循环内的 setTimeout 中保留参数值
【发布时间】：2021-06-12 09:52:18
【问题描述】：

我正在学习 setTimeout 并尝试在循环内打印一个数组，其中有一个延迟，每次迭代后不同索引处的值都会发生变化。我的原始数组是 [1,2,3,4,5]。我希望输出是这样的：

我知道闭包可以与 setTimeout 一起使用来保留参数的值，直到执行这些 Stack Overflow 问题中提到的。 How to preserve setTimeout parameter value until execution? 和 setTimeout in for-loop does not print consecutive values

所以它尝试了这个

let a = [1,2,3,4,5];

for(let i=0;i<a.length;i++){
  a[i]=7;
  dotimeout(a,i)
}

function dotimeout(a,i){
  setTimeout(function(){
    
    console.log(a)},i*1000)
}

和

let a = [1,2,3,4,5];

for(let i=0;i<a.length;i++){
  a[i] = 7;
  (
    function(b,j){
      setTimeout(()=>{
        console.log(b);
      },j*1000)
    }(a,i)
  );
}

但两者都给了我相同的结果：

我知道可以在 setTimeout 回调中完成数组操作以实现所需的结果，但这不是我的查询

所以我的问题是：为什么包装 setTimeout（闭包，不确定这是否是正确的术语）的函数不起作用，以及如何保留 setTimeout 参数直到使用数组执行在 setTimeout 之外进行操作。

【问题讨论】：

只有一个数组对象，几乎同时记录。除非您制作对象的副本，否则它无法记录不同的对象。
我认为你应该先了解更多关于事件循环的知识。 SetTimeout 在 for 循环执行完成之前不会执行。这就是它打印所有 7 个值的原因。

标签： javascript arrays loops closures settimeout

【解决方案1】：

您的循环从头到尾运行。在每次迭代中，它会将a 的一个元素设置为7，并使用setTimeout 安排稍后的回调。

到回调开始调用时 - a 的所有元素都已设置为 7。

当您将 a 作为变量传递给您的内部函数时，您实际上传递了对它的引用，因此在内部，您的函数仍会看到最新的 a 数组。

您可以做的一件事是复制a 并传递：

let a = [1,2,3,4,5];

for(let i=0;i<a.length;i++){
  a[i] = 7;
  let copyOfA = [ ...a ];
  (
    function(b,j){
      setTimeout(()=>{
        console.log(b);
      },j*1000)
    }(copyOfA,i)
  );
}

虽然使用副本，但内部功能是多余的。这也可以：

let a = [1,2,3,4,5];

for(let i=0;i<a.length;i++){
  a[i] = 7;
  let copyOfA = [ ...a ];
  setTimeout(()=>{
    console.log(copyOfA);
  },i*1000)
}

【讨论】：

【解决方案2】：

代码没有做错。解决方案非常简单，只需将a[i] = 7 放在setTimeout 代码块中即可。 Javascript 有一个叫做堆栈的东西，setTimeout 函数块内的任何事件总是在调用该 setTimeout 的函数的每个事件之后触发，即使超时为 0 毫秒。所以你的a[i] = 7 在运行到下一个循环之前不会等待任何毫秒 setTimeout 完成，实际上它只是这样做，然后调用将分配到调用堆栈底部的dotimeout。

【讨论】：