JavaScript的只设置属性为数组最后一项 [英] Javascript only sets attribute for last item in array

问题描述

我有〜50项的数组，并在JavaScript它通过这个数组来检查一个条件，如果条件满足它setsattribute关于被选中的复选框。它通过很好，但每次只更改数组中的最后十分项目。这里是code的部分。

I have an array of ~50 items and in javascript it goes through this array to check a condition and if the condition is met it setsattribute for checkboxes on the be checked. It goes through nicely but only changes the very final item in the array every time. Here is a section of the code.

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;        
        }

    };

因此​​，大家可以看到，如果条件满足与否它仍然会更改属性，但我一直收到错误在于它只有数组中改变了最后一个项目。任何想法？

So as you can see if the condition is met or not it will still change the attributes but the error I have been receiving is that it only changes the final item in the array. Any ideas?

推荐答案

这是一个经典的问题，在JavaScript中异步回调。 onload处理将被称为一段时间后，for循环结束不久，因而在for循环结束时被盯住的指数在那里结束了和局部变量newImg和coName将只在循环的最后的值

This is a classic issue with an asynchronous callback in Javascript. The onload handler will be called some time later, long after the for loop has finished, thus the index in the for loop is pegged at the end where it ended up and the local variables newImg and coName will only have their last values in the loop.

这是你希望让他们是唯一可以为每个不同的onload处理onload处理内部使用则要传递到实际功能闭合的任何变量。有几种方法可以做到这一点。

Any variables that you wish to use inside the onload handler will have to passed into the actual function closure so that they are uniquely available for each different onload handler. There are several ways to do that.

此方法使用函数闭包捕捉传递的价值，并使其可用于在onload函数处理程序：

This way uses a function closure to capture the passed in value and make it available to the onload function handler:

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变量的值，并将其放入它成为独特的，不会被后来的变化到外coName变量这是在for循环来进行封闭。

In Javascript-speak, what this method does is assign to the onload attribute the return value from executing an anonymous function call. That anonymous function call passed the coName parameter into it. That function returns another anonymous function which is what gets assigned as the onload handler. But, because of the way function closures work in javascript, the value of coName is captured in the function closure and is kept accessible to the onload handler for the duration of the function closure. One can think of it a little like an instance of a function with state around it (values of local variables) that is uniquely capture each time it's set up. In this case, it captures the value of the coName variable and puts it into the closure where it becomes unique and won't be effected by later changes to the outer coName variable that's in the for loop.

另一种方法是把参数的实际对象，所以你可以检索从那里：

Another way to do it is to put the parameter on the actual object so you can retrieve it from there:

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;        
        }

    };
}

这篇关于JavaScript的只设置属性为数组最后一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！