setTimeout與循環閉包的示例分析

# setTimeout與循環閉包的示例分析

## 引言

在JavaScript異步編程中，`setTimeout`與循環閉包的組合常會引發令人困惑的現象。本文將通過多個代碼示例，深入分析這種組合產生的問題及其解決方案。

## 一、基礎概念回顧

### 1.1 setTimeout的工作原理
```javascript
setTimeout(callback, delay)

• 將callback函數加入任務隊列
• 在指定delay毫秒后執行（最小延遲4ms）
• 執行時機受事件循環機制影響

1.2 閉包的核心特征

function outer() {
  let count = 0;
  return function inner() {
    return ++count;
  }
}

• 內部函數訪問外部作用域變量
• 變量持久化存儲
• 每次調用獨立維護作用域

二、經典問題場景重現

2.1 問題代碼示例

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
// 輸出：6 6 6 6 6（每秒一個）

2.2 現象解析

1. 同步循環立即執行完畢，i最終值為6
2. 所有回調函數共享同一個i的引用
3. 當回調執行時，訪問的都是最終的i值

三、作用域深度分析

3.1 變量提升與作用域鏈

// 實際執行等價于
var i;
for (i = 1; i <= 5; i++) {
  // ...
}

3.2 執行上下文變化

四、解決方案對比

4.1 IIFE（立即執行函數）

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

• 原理：每次迭代創建新作用域
• 優點：ES5兼容性好
• 缺點：代碼稍顯冗余

4.2 let塊級作用域

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

• 原理：每次迭代創建新綁定
• 優點：語法簡潔
• 注意：需要ES6支持

4.3 setTimeout第三參數

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

• 原理：參數直接傳遞
• 兼容性：IE10+

五、進階場景分析

5.1 多層嵌套循環

for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    setTimeout(function() {
      console.log(i, j);
    }, (i * 3 + j) * 100);
  }
}
// 輸出：4 4（共9次）

解決方案：

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    setTimeout(function() {
      console.log(i, j);
    }, (i * 3 + j) * 100);
  }
}

5.2 結合異步操作

const tasks = [];
for (var i = 0; i < 5; i++) {
  tasks.push(() => {
    return new Promise(res => {
      setTimeout(() => res(i), 1000);
    });
  });
}
// 所有Promise都resolve(5)

優化方案：

const tasks = Array(5).fill().map((_, i) => 
  () => new Promise(res => {
    setTimeout(() => res(i + 1), 1000 * (i + 1));
  })
);

六、性能與內存考量

6.1 內存占用對比

6.2 執行效率測試

// 測試代碼示例
console.time('let');
for (let i = 0; i < 10000; i++) {
  setTimeout(() => {}, 0);
}
console.timeEnd('let');

典型結果： - let方案：~120ms - IIFE方案：~150ms - var方案：~80ms（但結果錯誤）

七、最佳實踐建議

1. 現代項目：優先使用let+塊級作用域
2. 傳統項目：采用IIFE方案
3. 參數傳遞：合理利用第三個參數
4. 代碼審查：特別注意循環中的異步操作

八、延伸思考

8.1 事件循環的影響

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
    while(true) {} // 阻塞測試
  }, 1000);
}

• 驗證回調執行的獨立性

8.2 與Promise的結合

async function process() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(res => {
      setTimeout(() => {
        console.log(i);
        res();
      }, 1000);
    });
  }
}

結論

通過本文分析可見，理解閉包與異步執行的交互機制至關重要。選擇適合的解決方案需要權衡： - 代碼可讀性 - 運行環境要求 - 性能需求 - 團隊協作約定

正確運用這些知識，可以避免常見的陷阱，編寫出更健壯的異步代碼。

附錄：完整測試代碼

// 所有方案的完整實現對比
const implementations = [
  {
    name: 'Problematic var',
    code: () => {
      for (var i = 1; i <= 5; i++) {
        setTimeout(() => console.log('var:', i), i * 300);
      }
    }
  },
  {
    name: 'IIFE Solution',
    code: () => {
      for (var i = 1; i <= 5; i++) {
        (j => {
          setTimeout(() => console.log('IIFE:', j), j * 300);
        })(i);
      }
    }
  },
  {
    name: 'let Solution',
    code: () => {
      for (let i = 1; i <= 5; i++) {
        setTimeout(() => console.log('let:', i), i * 300);
      }
    }
  }
];

implementations.forEach(impl => {
  console.log(`\nRunning ${impl.name}:`);
  impl.code();
});

”`