JavaScript 循環中異步操作閉包陷阱：使用 IIFE 捕獲當前循環變量

問題代碼

for (var i = 1; i < rows.length; i++) {
    var tds = rows[i].cells;
    db.transaction(function(tx) {
        tx.executeSql("INSERT ...", [tds[0].innerHTML, ...]); // 閉包捕獲同一個 tds
    });
}
// 結果：所有事務插入最後一行數據

原因

var i 和 var tds 是函數作用域，循環結束時 i 為最後值，異步回調執行時讀取的均為最終狀態。

解決方案：IIFE (立即調用函數表達式)

for (var i = 1; i < rows.length; i++) {
    var tds = rows[i].cells;
    (function(tds) {  // 創建新作用域，捕獲當前 tds
        db.transaction(function(tx) {
            tx.executeSql("INSERT ...", [tds[0].innerHTML, ...]);
        });
    })(tds);
}

現代寫法 (ES6+)

for (let i = 1; i < rows.length; i++) {  // let 塊級作用域，每次迭代綁定新 i
    const tds = rows[i].cells;
    db.transaction(tx => {
        tx.executeSql("INSERT ...", [tds[0].innerHTML, ...]);
    });
}