为什么我的 JavaScript 循环延迟（使用 setTimeout）不修改变量？

Question

我想用 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);

我错过了一些明显的东西吗？

Answer 1

为什么我的 JavaScript 循环延迟（使用 setTimeout）不修改变量？

它正在修改变量。 但是你在修改之前观察变量。 您的代码的操作顺序是有效的：

1. 定义一个数组。
2. 安排稍后修改的阵列。
3. 将阵列记录到控制台。
4. 修改数组。

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

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

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

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