為什么我的 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);