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

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

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

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

這個現(xiàn)象背后隱藏著JavaScript的兩個重要特性：

1. var沒有塊級作用域：在for循環(huán)中用var聲明的i實際上是函數(shù)作用域（或全局作用域）的
2. 異步執(zhí)行：setTimeout的回調(diào)函數(shù)會在循環(huán)結(jié)束后才執(zhí)行

具體執(zhí)行過程是這樣的：

1. for循環(huán)瞬間執(zhí)行完畢（同步代碼），i從0增加到5（當(dāng)i=5時循環(huán)停止）
2. 1秒后，5個setTimeout回調(diào)開始執(zhí)行
3. 此時它們訪問的都是同一個i，而i的值已經(jīng)是5了
4. 所以輸出了5個5

二、解決方案1：使用IIFE創(chuàng)建閉包

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

原理：

• 立即執(zhí)行函數(shù)(IIFE)為每次循環(huán)創(chuàng)建一個新作用域
• 把當(dāng)前的i值作為參數(shù)j傳入并"凍結(jié)"住
• 每個setTimeout回調(diào)訪問的都是自己閉包中的j

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

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

這是最優(yōu)雅的解決方案！

• let有塊級作用域，每次循環(huán)都會創(chuàng)建一個新的i
• 相當(dāng)于自動為我們創(chuàng)建了閉包
• 代碼簡潔直觀，沒有魔法

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

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

小技巧：

• setTimeout可以接受多個參數(shù)，第三個及以后的參數(shù)會作為回調(diào)函數(shù)的參數(shù)
• 相當(dāng)于瀏覽器幫我們做了參數(shù)綁定

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

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

原理：

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

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

let在for循環(huán)中的行為很特殊：

1. 每次迭代都會創(chuàng)建一個新的詞法環(huán)境（可以理解為新的作用域）
2. 新的i會在這個環(huán)境中初始化，值為上一次迭代結(jié)束時的值
3. 相當(dāng)于自動為我們創(chuàng)建了閉包

可以近似理解為：

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

七、實際開發(fā)中的建議

1. 默認(rèn)使用let/const：告別var，擁抱塊級作用域
2. 注意異步代碼的依賴關(guān)系：異步回調(diào)中使用循環(huán)變量時要特別小心
3. 合理使用閉包：理解閉包的工作原理，但不要濫用
4. 考慮代碼可讀性：有時候把異步邏輯提取成獨立函數(shù)會更清晰

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

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

// 事件監(jiān)聽中的類似問題
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); // 正確輸出對應(yīng)的索引
  });
}

九、總結(jié)

1. 問題根源：var的作用域 + 異步執(zhí)行時機(jī)

2. 解決方案：

   • IIFE創(chuàng)建閉包（傳統(tǒng)方式）
   • 使用let（最推薦）
   • 利用setTimeout第三個參數(shù)
   • 使用bind綁定參數(shù)

3. 最佳實踐：使用let/const避免這類問題

記住，在JavaScript中，同步代碼和異步代碼的執(zhí)行時機(jī)是需要特別關(guān)注的重點。理解閉包和作用域，就能輕松應(yīng)對這類問題。

轉(zhuǎn)自https://juejin.cn/post/7510587921788321832