Question

这段代码困扰了我一整天。让我们说ledCount = 9，代码通过ID获取元素没有任何问题，但由于它必须绑定一个单独的函数onClick，并且因为变量i是本地的，所以writeLED函数总是获得第一个参数10（最大值） i + 1），但它需要得到当前的i + 1，就像getElementBy id i + 1那样。任何人都可以解决这个难题？

function showLED(ledCount){
for(var i = 0;i<=(ledCount-1);i++){
    if(color[i] == 0){
        document.getElementById('buttonLED'+(i+1)).onclick = function(){writeLED((i+1),1); } ;
        document.getElementById('buttonLED'+(i+1)).value="light is on";
    }else{
        document.getElementById('buttonLED'+(i+1)).onclick = function(){writeLED((i+1),0); } ;
        document.getElementById('buttonLED'+(i+1)).value="light is off";
    }
}
}

Answer 1

您需要将其包装在自执行函数中以创建新范围，您可以在其中保留增量函数的当前值。

你可以像这样内联：

document.getElementById('buttonLED'+(i+1)).onclick = function(loopincrement){   
    return function(){writeLED((loopincrement+1),1); } ;

}(i)

或作为这样的拉出函数：

function writeLEDInNewScope(inc){
    return function(){ writeLED(inc,1)};
}

document.getElementById('buttonLED'+(i+1)).onclick = writeLEDinNewScope(i+1);

外部函数将保留内部onclick函数的i值的当前值。它立即执行并返回您想要绑定到onclick属性的内部函数。它将保持对loopincrement变量的引用，这将不受未来循环迭代的影响。

Answer 2

这是infamous for loop problem。你必须像这样重写你的代码：

function callback(x) {
    return function() { writeLED(x, 1); };
}

function showLED(ledCount) {
    for (var i = 0; i <= (ledCount - 1); i++)(function(i) {
        if (color[i] == 0) {
            document.getElementById('buttonLED' + (i + 1)).onclick = callback(i + 1);
            document.getElementById('buttonLED' + (i + 1)).value = "light is on";
        } else {
            document.getElementById('buttonLED' + (i + 1)).onclick = callback(i + 1);
            document.getElementById('buttonLED' + (i + 1)).value = "light is off";
        }
    })(i);
}

Javascript - 在函数内的函数中使用变量

2 个答案: