Javascript仅为数组中的最后一项设置属性
我有一个由大约50个项目组成的数组，在javascript中，它通过这个数组来检查一个条件，如果条件满足，它就在be checked上设置复选框的属性。它可以很好地完成，但每次只更改数组中的最后一项。以下是代码的一部分。
for (i = 0; i < urlArray.length; i++) {
var newImg = new Image();
var coName = companyArray[i];
newImg.onload = function(){
if (condition is met){
nStar++;
document.getElementById(coName).setAttribute("checked", "checked");
document.getElementById(coName).checked = true;
} else {
nStar++;
document.getElementById(coName).setAttribute("checked", "checked");
document.getElementById(coName).checked = true;
document.getElementById(coName).setAttribute("disabled", "disabled");
document.getElementById(coName).disabled = true;
}
};因此，正如您所看到的，无论条件是否满足，它仍然会更改属性，但我收到的错误是，它只更改数组中的最后一项。有什么想法吗？
回答 2
Stack Overflow用户
发布于 2011-08-10 00:27:36
这是Javascript中异步回调的典型问题。onload处理程序将在for循环结束很长一段时间后被调用，因此for循环中的索引在其结束处被锁定，并且局部变量newImg和coName在循环中将只有它们的最后一个值。
您希望在onload处理程序中使用的任何变量都必须传递到实际的函数闭包中，以便它们对于每个不同的onload处理程序都是唯一可用的。有几种方法可以做到这一点。
这种方式使用函数闭包来捕获传入的值，并使其可用于onload函数处理程序：
for (i = 0; i < urlArray.length; i++) {
var newImg = new Image();
var coName = companyArray[i];
newImg.onload = (function (coName) {
return function(){
if (condition is met){
nStar++;
document.getElementById(coName).setAttribute("checked", "checked");
document.getElementById(coName).checked = true;
} else {
nStar++;
document.getElementById(coName).setAttribute("checked", "checked");
document.getElementById(coName).checked = true;
document.getElementById(coName).setAttribute("disabled", "disabled");
document.getElementById(coName).disabled = true;
}
};
}) (coName);
}在Javascript语言中，此方法的作用是将执行匿名函数调用的返回值分配给onload属性。该匿名函数调用将coName参数传递给它。该函数返回另一个匿名函数，该函数被指定为onload处理程序。但是，由于函数闭包在javascript中的工作方式，coName的值被捕获在函数闭包中，并在函数闭包期间由onload处理程序访问。你可以把它想象成一个函数的实例，它周围有状态(局部变量的值)，在每次设置时都会被唯一地捕获。在本例中，它捕获coName变量的值并将其放入闭包中，在闭包中该变量变得唯一，并且不会受到for循环中外部coName变量稍后更改的影响。
另一种方法是将参数放在实际对象上，这样您就可以从那里检索它：
for (i = 0; i < urlArray.length; i++) {
var newImg = new Image();
newImg.setAttribute("coName". companyArray[i]);
newImg.onload = function() {
var coName = this.getAttribute("coName");
if (condition is met){
nStar++;
document.getElementById(coName).setAttribute("checked", "checked");
document.getElementById(coName).checked = true;
} else {
nStar++;
document.getElementById(coName).setAttribute("checked", "checked");
document.getElementById(coName).checked = true;
document.getElementById(coName).setAttribute("disabled", "disabled");
document.getElementById(coName).disabled = true;
}
};
}Stack Overflow用户
发布于 2011-08-10 00:30:16
问题是，在执行任何函数时，变量coName始终是最后一个数组值。你可以这样做：
for (i = 0; i < urlArray.length; i++) {
var newImg = new Image();
var coName = companyArray[i];
newImg.onload = (function(name){
return function(){
if (true) {
nStar++;
document.getElementById(name).setAttribute("checked", "checked");
document.getElementById(name).checked = true;
} else {
nStar++;
document.getElementById(name).setAttribute("checked", "checked");
document.getElementById(name).checked = true;
document.getElementById(name).setAttribute("disabled", "disabled");
document.getElementById(name).disabled = true;
}
}
})(coName);
}https://stackoverflow.com/questions/7004619
复制相似问题
腾讯云开发者
