JavaScript for 循环增量的行为很奇怪

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我有以下 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

我假设您真正想要做的是在 $(window).load 函数中使用 for 循环，如下所示:

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

这将在加载窗口后运行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