js閉包解決事件傳參錯誤的問題

問題

js,在事件中使用外部的參數，因爲定義事件的時候，事件不執行，當執行事件的時候，參數卻已經改變。如下

for (var i=0;i<statementList.length;i++) {
    var statement = statementList[i];
    var statementId = statement.id;
        $item.find('.historytest_right').click(function () {
            console.info(statementId);
        });
    $('body').append($item);
}

這段代碼，是循環了一個數組，爲每一項添加一個單擊事件,單擊之後，輸出statementId,但是都是輸出8，也就是最後一個statement的id,當單擊的時候，statement的值已經固定了，成爲最後一個了.

解決方法

用js的閉包特性，可以記錄當時定義函數時的值,如下：

for (var i=0;i<statementList.length;i++) {
    var statement = statementList[i];
    var statementId = statement.id;
    //定義函數，立即執行，並將參數傳遞過去，進行記錄（一直保持在內存中）
    (function (myStatementId) {
        $item.find('.historytest_right').click(function () {
            console.info(myStatementId);
        });
    })(statementId);
    $('body').append($item);
}

這種寫法是可以的。

也可以寫成內部臨時變量

(function (myStatementId) {
    $item.find('.historytest_right').click(function () {
        console.info(myStatementId);
    });
})(statementId);

//===>內部臨時變量

(function () {
    var myStatementId = statementId;
    $item.find('.historytest_right').click(function () {
        console.info(myStatementId);
    });
})(statementId);