为什么我的 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

Why is my JavaScript loop with time delay (using setTimeout) not modifying variables?

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

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

（作为调试注意事项，此行为的最大线索应该是记录整个“不正确”数组 ，然后 记录每个“正确”值。 )

所以代码运行正常，您只需要在代码执行完任务后观察结果即可。

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

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

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

Why is my JavaScript loop with time delay (using setTimeout) not modifying variables?

javascript

arrays

scope

loops