javascript - JavaScript for 循环执行次数过多。

Question

可能重复：
循环内的 Javascript 闭包 - 简单的实际示例

有人能告诉我为什么这段代码中'i'的值会打印出数字4吗？循环只转到 3，但它会在 menu_feedback div 内打印“i = 4”。

for(i=1; i<=3; i++){
    $('#file_button'+i).hover(function (){
        $('#menu_feedback').html('i = '+i+'<br/>');
    }, function(){
        $('#menu_feedback').html('');
    });
}

.

<button type="button" id="file_button1">Door 1</button>
<button type="button" id="file_button2">Door 2</button>
<button type="button" id="file_button3">Door 3</button>

<div id="menu_feedback"></div>

Answer 1

欢迎来到封闭的世界。

用这个：

for(i=1; i<=3; i++) {
    (function(i) {
        // the code that depends on i
    })(i);
}

Answer 2

这是一个经典的 JavaScript 问题。这是因为函数中的变量与循环中的变量相同i。hover所以，当循环结束时，i是 4，所以它在函数中是 4。

尝试这样的事情：

var hoverFunc = function(i){
    return function(){
        $('#menu_feedback').html('i = '+i+'<br/>');
    };
};
for(i=1; i<=3; i++){
    $('#file_button'+i).hover(hoverFunc(i), function(){
        $('#menu_feedback').html('');
    });
}

hoverFunc是一个闭包。它返回一个围绕 的值“关闭”的函数i。

Answer 3

看看循环内的 JavaScript 闭包——简单的实用示例，了解有关您面临的问题的更多信息。

但是，对于 jQuery 事件处理程序，还有另一种方法可以解决这个问题，将索引作为事件数据传递：

for(i=1; i<=3; i++){
    $('#file_button'+i).mouseenter({index: i}, function(event){
        $('#menu_feedback').html('i = '+ event.data.index + '<br/>');
    }).mouseleave(function(){
        $('#menu_feedback').html('');
    });
}