JavaScript for 循环增量行为异常

Question

我有以下JS：

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

当页面加载时，它给了我预期的两次提醒。但奇怪的是 i 的值在两个 alert 上都是 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

您正在创建一个包含捕获变量 i 的闭包。当window.load个事件处理程序执行时，循环已经完成并且该变量的值为3。

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

更新：

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

我的代码可以重写：

function getEventHandler(iter) {
  return function() { alert(iter); };
}

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

getEventHandler returns 一个函数（成为 $(window).load 事件处理程序）。返回的函数将 iter 参数与 getEventHandler 执行时此参数的值绑定 - 每次执行。在循环中，我们在每个循环迭代中立即使用 i.

的当前（变化）值调用 getEventHandler

Answer 2

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

$(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

JavaScript for 循环增量行为异常

JavaScript for loop increment behaves strangely

javascript

jquery

for-loop