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;

此数组正在获取某个条件的数据。单击名为Upload的Button时调用Handler函数。问题是当我按下上传按钮时，它会打印正确的值并保持按下并再次打印值。在我的代码中是否有任何错误迫使循环打印值2次？
或者其他任何事情都在这样做？

Answer 1

它看起来像一个关联数组（因为hellow既是元素ID又是数组键），但你像索引数组一样访问它。

所以你应该这样做：

for (var key in picArray) {
    alert(picArray[key]);
}

Answer 2

您应该使用event.preventDefault()来停止触发按钮。

Answer 3

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

这个问题可以通过创建一个函数并在循环的每次迭代中调用它来解决，同时传递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);
}

循环调用中的问题

3 个答案: