为什么我的带有时间延迟的 JavaScript 循环（使用 setTimeout）没有修改变量？答案

【问题标题】：Why is my JavaScript loop with time delay (using setTimeout) not modifying variables?为什么我的带有时间延迟的 JavaScript 循环（使用 setTimeout）没有修改变量？
【发布时间】：2021-09-30 16:23:33
【问题描述】：

我想用 JavaScript 编写一个循环，它在每次迭代后都有延迟。我尝试增加数组中的元素。但它根本没有修改数组中的元素！

let A = [1, 2, 3, 4];
let N = A.length;

let f = i => {
  setTimeout(
    () => {
      A[i] += 1;
      if (++i < N) {
        f(i);
      }
    },
    100
  );
}

f(0);
console.log(A);

预期的输出是[2, 3, 4, 5]，但我得到的是[1, 2, 3, 4]。如果我在增量后添加console.log(A[i])

let A = [1, 2, 3, 4];
let N = A.length;

let f = i => {
  setTimeout(
    () => {
      A[i] += 1;
      console.log(A[i]);
      if (++i < N) {
        f(i);
      }
    },
    100
  );
}

f(0);
console.log(A);

它打印出预期值2 3 4 5。但是console.log(A) 仍然打印原始数组[1, 2, 3, 4]。 OTOH，如果我使用 for 循环，它就可以工作。

let A = [1, 2, 3, 4];
let N = A.length;

for (let i = 0; i < N; i++) {
  A[i] += 1;
}

console.log(A);

我是否遗漏了一些明显的东西？

【问题讨论】：

标签： javascript arrays loops scope

【解决方案1】：

为什么我的带有时间延迟的 JavaScript 循环（使用 setTimeout）没有修改变量？

它正在修改变量。但是您正在观察变量 before 它们被修改。您的代码的操作顺序实际上是：

定义一个数组。
安排稍后修改阵列。
将阵列记录到控制台。
修改数组。

（作为调试说明，您对此行为的最大线索应该是记录整个“不正确”数组在记录每个“正确”值之前。）

所以代码按预期工作，您只需要在代码执行完任务后观察结果即可。

目前数组有4个元素，所以修改总共需要400ms。将其设置为在 500ms 后登录到控制台并观察更新后的数组：

setTimeout(() => console.log(A), 500);

【讨论】：