&

javascript篇：setTimeout遇上for循環：為什么總是輸出5？如何正確輸出0-4？

freeflydom

2025年6月4日 11:39 本文熱度 259

今天咱們來聊聊一個經典的面試題，也是很多新手容易踩坑的問題——在for循環中使用setTimeout。先看這段代碼：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

你以為它會輸出0,1,2,3,4？太天真了！實際輸出是五個5！這是為什么？又該如何解決？且聽我慢慢道來~

一、為什么會這樣？——作用域與閉包的"陷阱"

這個現象背后隱藏著JavaScript的兩個重要特性：

var沒有塊級作用域：在for循環中用var聲明的i實際上是函數作用域（或全局作用域）的
異步執行：setTimeout的回調函數會在循環結束后才執行

具體執行過程是這樣的：

for循環瞬間執行完畢（同步代碼），i從0增加到5（當i=5時循環停止）
1秒后，5個setTimeout回調開始執行
此時它們訪問的都是同一個i，而i的值已經是5了
所以輸出了5個5

二、解決方案1：使用IIFE創建閉包

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}

原理：

立即執行函數(IIFE)為每次循環創建一個新作用域
把當前的i值作為參數j傳入并"凍結"住
每個setTimeout回調訪問的都是自己閉包中的j

三、解決方案2：使用let塊級作用域（ES6推薦）

for (let i =  0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

這是最優雅的解決方案！

let有塊級作用域，每次循環都會創建一個新的i
相當于自動為我們創建了閉包
代碼簡潔直觀，沒有魔法

四、解決方案3：利用setTimeout的第三個參數

for (var i = 0; i < 5; i++) {
  setTimeout(function(j) {
    console.log(j);
  }, 1000, i);
}

小技巧：

setTimeout可以接受多個參數，第三個及以后的參數會作為回調函數的參數
相當于瀏覽器幫我們做了參數綁定

五、解決方案4：用bind提前綁定參數

for (var i = 0; i < 5; i++) {
  setTimeout(function(j) {
    console.log(j);
  }.bind(null, i), 1000);
}

原理：

Function.prototype.bind可以提前綁定參數
第一個參數是this（這里不需要所以傳null）
后續參數會作為綁定函數的參數

六、深入理解：為什么let能解決問題？

let在for循環中的行為很特殊：

每次迭代都會創建一個新的詞法環境（可以理解為新的作用域）
新的i會在這個環境中初始化，值為上一次迭代結束時的值
相當于自動為我們創建了閉包

可以近似理解為：

// 偽代碼，幫助理解let的行為
{
  let i = 0;
  setTimeout(function() { console.log(i); }, 1000);
}
{
  let i = 1;
  setTimeout(function() { console.log(i); }, 1000);
}
// ...以此類推

七、實際開發中的建議

默認使用let/const：告別var，擁抱塊級作用域
注意異步代碼的依賴關系：異步回調中使用循環變量時要特別小心
合理使用閉包：理解閉包的工作原理，但不要濫用
考慮代碼可讀性：有時候把異步邏輯提取成獨立函數會更清晰

八、舉一反三：類似的陷阱

這種問題不僅出現在setTimeout中，其他異步場景也會遇到：

// 事件監聽中的類似問題
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // 總是輸出buttons.length
  });
}
// 解決方案同樣適用
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // 正確輸出對應的索引
  });
}