javascript - 如何在循环中嵌套的函数调用中维护正确的变量范围/值

Question

在处理生成的 HTML 以及循环内的事件处理时，我遇到了范围问题。

想象一下这个场景

# var container=$('#someContainerId');

_buildField=function(index){
    return $('<div/>').data('index', index);
};

for(var i=1; i<=10; i++){
    container.append( $('<div/>').on('click', function(){
        _buildField(i);
    } );
}

在此示例中，_buildField()将始终收到值 10 ，无论 div 中的哪一个正在单击元素。

老实说，我认为它有所不同，但我们再次开始，学习新的东西。

问题

如何确保将正确的值(当前迭代存储在 i 中)传递到 _buildField() ？

Answer 1

ES6

如果您可以使用 ES6，选择 let 而不是 var 可能会成功。

ES5

既然您说需要使用 ES5，那么应用 IIFE 模式应该可以解决您的问题。这是一个人为的示例:

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

根据您的具体情况调整上述内容应该会导致:

for(var i=1; i<=10; i++) {
    (function (i) {
        container.append( $('<div/>').on('click', function(){
            _buildField(i);
        });
    })(i);
}