Question

我有以下JS：

for ( var i = 1; i <= 2; i++ ) {
    $(window).load(function() {
        alert(i);
    });
}

当页面加载时，它会按预期两次发出警报。但奇怪的是i的值在两个警报上都是3。我希望第一个警报的i值为1，第二个警报的值为2。是什么原因造成的？提前谢谢！

更新＃1

如果我需要将函数放在循环中，因为我想使用数字增量作为选择器，该怎么办？有这个问题的解决方案吗？这就是我的意思

for ( var i = 1; i <= 2; i++ ) {
    $( '.element-' + i + ' .span' ).click( function( event ) {              
        $( '.element-' + i + ' ul' ).show( 'fast' );         
    });
}

点击功能未被触发，因为我们已经知道i = 3。我希望在点击.element-1 .span和.element-2 .span时触发点击功能。有解决方法吗？

Answer 1

我认为你真正想做的是在for函数中有$(window).load循环，如下所示：

$(window).load(function() {
    for (var i = 0; i <= 2; i++) {
        alert(i);
    }
});

这将在加载window后运行for循环。

说明您在警报中获得3的原因

此图表说明了您当前在警报中获得3的原因：

TIME
|     The for loop is begun (a = 0)
|     The load event on the window is handled by the specified function the load
|         function itself does not run
|     i is incremented (i++) now i = 1
|     The load event on the window is handled again
|     i is incremented (i++) now i = 2
|     The load event on the window is handled again
|     i is incremented (i++) now i = 3
|     The condition of the for loop fails so execution is discontinued
|
|     The window is loaded
|     Each of the callbacks is run and at this point i = 3 so 3 is alerted each
|         time

Answer 2

您正在使用捕获的变量i创建闭包。当window.load事件处理程序执行时，循环已完成，此变量的值为3。

for ( var i = 1; i <= 2; i++ ) {
    $(window).load((function(iter) {
        return function() { alert(iter); };
    })(i));
}

更新

在您的代码中，您直接将匿名函数指定为$(window).load的事件处理程序。此函数将循环迭代器变量i绑定 - 作为变量，并且，当此函数执行时，i的值是所有先前执行的代码分配的值，这是完成的循环 - 当{ {1}}变成了3。

我的代码可以重写：

function getEventHandler(iter) { return function() { alert(iter); }; } for ( var i = 1; i <= 2; i++ ) { $(window).load(getEventHandler(i)); }返回一个函数（变为getEventHandler事件处理程序）。返回的函数将$(window).load参数与iter执行时此参数的值绑定 - 每次执行时。在循环中，我们在每次循环迭代中立即调用getEventHandler，并使用getEventHandler的当前（更改）值。

用于循环增量的JavaScript表现奇怪

2 个答案: