Javascript -在函数中使用变量

Javascript - use variable in a function, within a function

本文关键字：变量 函数 Javascript      更新时间：2023-09-26

这段代码困扰了我一整天。假设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";
    }
}
}

您需要将其封装在一个自动执行的函数中，以创建一个新的作用域，在该作用域中可以保留递增函数的当前值。

你可以这样做:

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变量的引用，这将不会受到未来循环迭代的影响。

这是一个臭名昭著的for循环问题。你必须像这样重写你的代码:

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);
}
相关文章：