javascript - 循环调用中的问题

Question

我在 JavaScript 工作。我遇到循环调用问题。
我的代码是:

这是我的数组

picArray = []; // Have tried with this too var picArray = new Array();

这是我的 onClick 函数:

handler:function(){
    for(var i = 1; i<picArray.length; i++) {
        alert(picArray[i]);
    }
}

这是我打印数组值的循环。我的数组是:

var imgSource = document.getElementById(hellow).src;
picArray[hellow] = imgSource;

此数组正在获取条件数据。单击称为上传的按钮时将调用处理函数。问题是当我按下上传按钮时，它会打印出正确的值并保持按下状态并再次打印这些值。我的代码中是否有任何错误强制循环打印值 2 次？
或者其他任何东西正在做这个？

Answer 1

我认为您应该考虑在单击按钮时使用闭包函数，以保留外部上下文的范围。我的假设是问题的根源在于这样一个事实，即当您进入循环条件时，只有在循环结束时您才能获得最终值。

这个问题可以通过创建一个函数并在循环的每次迭代中调用它来解决，同时传递 i;调用该函数将形成一个全新的执行上下文，其中 i 的值被保留并且可以在该上下文中以任何方式使用，包括在返回的函数中。

因为您没有发布其余代码，所以我只认为这就是问题所在。为了解决这个问题，这里是我将在这个上下文中使用的代码:

function handler(n) {
    return function() {
        alert( 'You clicked on: ' + n );
    };
}

for (var i = 0; i < picArray.length; ++i) {
    picArray[i].onclick = handler(i);
}

...或者另一种更优雅的方式:

for (var i = 0; i < picArray.length; ++i) {
    picArray[i].onclick = (function(n) {
        return function() {
            alert( 'You clicked on: ' + n );
        };
    })(i);
}